在Vue3中 ref()和reactive()这个函数使得我们的变量拥有了双向绑定属性；ref 和 reactive 都是用于在 Vue 组件中创建响应式数据的方法，但它们有不同的使用方式和注意事项。包括数组场景，对象重新赋值场景等，否责可能导致页面不渲染的情况
ref
ref 主要用于创建一个包装简单值的响应式引用。它将一个普通的 JavaScript 值包装在一个响应式对象中。以下是一些使用 ref 的注意事项：
- 初始化值：
ref需要一个初始值作为参数，这个初始值可以是任何 JavaScript 数据类型。javascriptCopy codeimport { ref } from 'vue'; const myValue = ref(0); // 创建一个响应式引用，初始值为0 - 访问值： 为了访问
ref的值，你需要通过.value属性来获取它。javascriptCopy codeconsole.log(myValue.value); // 获取myValue的值 - 修改值： 为了修改
ref的值，你可以直接赋值给.value属性。javascriptCopy codemyValue.value = 1; // 修改myValue的值 - 注意点： 在模板中使用
ref时，不需要使用.value，因为 Vue 会自动解包它。
reactive
reactive 用于创建包含多个属性的响应式对象，通常用于管理复杂的数据结构。以下是一些使用 reactive 的注意事项：
- 初始化对象：
reactive需要一个普通 JavaScript 对象作为参数。javascriptCopy codeimport { reactive } from 'vue'; const myObject = reactive({ name: 'John', age: 30 }); - 访问属性： 你可以像访问普通对象一样访问
reactive对象的属性。javascriptCopy codeconsole.log(myObject.name); // 访问属性 - 修改属性： 你可以直接修改
reactive对象的属性，这会触发响应式更新。javascriptCopy codemyObject.age = 31; // 修改属性 - 注意点： 不需要使用
.value，因为reactive对象的属性会自动保持响应式。 - 嵌套对象：
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,[])
