Vue使用reactive动态改变属性
1.目的
我们的目的是根据某些事件来改变某些属性，从而动态的展示在页面上。
这里如果把属性直接定义为ref是不行的，需要定义为reactive才行。
2.使用
const count = ref(1)
const obj = reactive({ count })
// ref 会被解包
console.log(obj.count === count.value) // true
// 会更新 `obj.count`
count.value++
console.log(count.value) // 2
console.log(obj.count) // 2
// 也会更新 `count` ref
obj.count++
console.log(obj.count) // 3
console.log(count.value) // 3
注意当访问到某个响应式数组或 Map 这样的原生集合类型中的 ref 元素时，不会执行 ref 的解包：
同时注意reactive不能直接传基础数据类型，要么传对象，要么传数组。
将一个 ref 赋值给为一个 reactive 属性时，该 ref 会被自动解包：
const count = ref(1)
const obj = reactive({})
obj.count = count
console.log(obj.count) // 1
console.log(obj.count === count.value) // true
