Vue3 ref和reactive使用注意事项

在Vue3中 ref()和reactive()这个函数使得我们的变量拥有了双向绑定属性；ref 和 reactive 都是用于在 Vue 组件中创建响应式数据的方法，但它们有不同的使用方式和注意事项。包括数组场景，对象重新赋值场景等，否责可能导致页面不渲染的情况

ref

ref 主要用于创建一个包装简单值的响应式引用。它将一个普通的 JavaScript 值包装在一个响应式对象中。以下是一些使用 ref 的注意事项：

1. 初始化值： ref 需要一个初始值作为参数，这个初始值可以是任何 JavaScript 数据类型。javascriptCopy codeimport { ref } from 'vue'; const myValue = ref(0); // 创建一个响应式引用，初始值为0
2. 访问值： 为了访问 ref 的值，你需要通过 .value 属性来获取它。javascriptCopy codeconsole.log(myValue.value); // 获取myValue的值
3. 修改值： 为了修改 ref 的值，你可以直接赋值给 .value 属性。javascriptCopy codemyValue.value = 1; // 修改myValue的值
4. 注意点： 在模板中使用 ref 时，不需要使用 .value，因为 Vue 会自动解包它。

reactive

reactive 用于创建包含多个属性的响应式对象，通常用于管理复杂的数据结构。以下是一些使用 reactive 的注意事项：

1. 初始化对象： reactive 需要一个普通 JavaScript 对象作为参数。javascriptCopy codeimport { reactive } from 'vue'; const myObject = reactive({ name: 'John', age: 30 });
2. 访问属性： 你可以像访问普通对象一样访问 reactive 对象的属性。javascriptCopy codeconsole.log(myObject.name); // 访问属性
3. 修改属性： 你可以直接修改 reactive 对象的属性，这会触发响应式更新。javascriptCopy codemyObject.age = 31; // 修改属性
4. 注意点： 不需要使用 .value，因为 reactive 对象的属性会自动保持响应式。
5. 嵌套对象： reactive 可以嵌套在其他 reactive 或 ref 中，以创建复杂的数据结构。javascriptCopy codeconst nestedObject = reactive({ person: reactive({ name: 'Alice' }), count: ref(0), });

总的来说，ref 用于包装单个简单值，而 reactive 用于创建包含多个属性的复杂对象。在使用它们时，要注意访问和修改值的方式，并根据需要选择合适的工具。不过，Vue 3 的响应式系统通常会自动处理大部分情况，使开发变得更加方便。

常见问题及解决方案

reactive数据被重新赋值后无法双向绑定(赋值后页面不改变)

这是因为reactive数据被重新赋值后，原来数据的代理函数和最新的代理函数不是同一个，无法被触发

推荐写法1：
let testObj = reactive({"a":1})
Object.assign(testObj,{"a":2})

推荐写法2：不使用reactive指定简单对象，多一层
let testObj2 = reactive({"data":{"a":1}})
testObj2.data={"a":2}

推荐写法3：简单对象使用ref
let testObj3 = reactive([])
testObj3.value = []

数组清空问题

方法1:
let arr = reactive([1, 2, 3])
arr.length = 0

方法2:
let arr2 = reactive([1, 2, 3])
Object.assign(arr2,[])