Vue3推荐使用ref而不是reactive

1、ref() 创建可以使用任何值类型的响应式 ref()   

ref定义的数据（包括对象）时，返回的对象是一个包装过的简单值，而不是原始值的引用;

就和对象深拷贝一样,是将对象属性值的赋值

ref声明的响应式变量需要携带.value小尾巴，volar（Vue-official）插件能自动补全.value 

2、reactive使用不当会失去响应

reactive定义数据（必须是对象），reactive返回的对象是对原始对象的引用，而不是简单值的包装。

类似对象的浅拷贝,是保存对象的栈地址,无论值怎么变还是指向原来的对象的堆地址;

reactive就算赋值一个新的对象,reactive还是指向原来对象堆地址

let state =reactive({count:0})

//赋值

// n 是一个局部变量，同 state.count 

// 失去响应性连接

let n = state.count  // 不影响原始的 state

n++

console.log(state.count) // 0

直接结构失响应

let state =reactive({count:0})  //普通解构count 和 state.count 失去了响应性连接

let { count } = state

count++ // state.count值依旧是0

使用toRefs结构不会失去响应

const state = reactive({count:0})//使用toRefs解构,后的属性为ref的响应式变量

let { count } =toRefs(state)

count.value++  // state.count值改变为1