软件工程日报20

关于响应式对象的遇到的问题 以下为例
定义dialogVisible 是通过 ref 函数创建的响应式对象。在 Vue 3 里，ref 函数会把一个普通的值包裹成一个响应式的对象，该对象有一个 .value 属性用于获取或设置其内部的值。下面详细说明为何在函数里使用 dialogVisible 时要加上 .value。
ref 创建响应式对象
ref 函数是 Vue 3 组合式 API 里用于创建响应式数据的方法。当你使用 ref 创建一个变量时，实际上创建的是一个包含 .value 属性的对象。例如：
import { ref } from 'vue';
const dialogVisible = ref(false);
这里的 dialogVisible 并非布尔值 false，而是一个包含 .value 属性的对象，其 .value 属性的值为 false。
2. 在函数中访问 ref 对象的值
当你要在函数里访问或修改 ref 对象的值时，就需要使用 .value 属性。比如在 addCategory 函数里：
const add = async() => {

dialogVisible.value = false;

};
在 dialogVisible.value = false; 这行代码中，你是在把 dialogVisible 对象的 .value 属性设置为 false。因为 dialogVisible 是一个 ref 对象，直接对 dialogVisible 赋值并不能修改其内部的值，只有通过 .value 属性才能访问和修改其内部的实际值。
3. 在模板中使用 ref 对象
在 Vue 3 的模板里，当使用 ref 对象时，Vue 会自动解包 ref 对象，也就是你无需手动添加 .value。例如在模板中：

这里的 dialogVisible 会自动被解包，所以你可以直接使用它，而不用写成 dialogVisible.value。
综上所述，在函数里使用 ref 对象时，要通过 .value 属性来访问和修改其内部的值；而在模板中使用 ref 对象时，Vue 会自动解包，无需手动添加 .value。