对于刚接触的小白来说，从vue2变成vue3的组合式属实有点懵逼。 但是看完官方文档大致了解到： reactive和ref的区别：
//1.reactive和ref都能定义一个基础数据类型如下
const state = reactive(0);
const state1 = ref(1);
输出只需要
<div>{{ state }}</div> ===>0
<div>{{ state1 }}</div> ===>1
特别提示：如果reactive定义`string`、`number` 和 `boolean` ，`symbol`类型
源码底层会提示：value cannot be made reactive: 0
//2.reactive和ref都能定义一个引用数据类型如下
const state = reactive({count:0});
const state1 = ref({count:0});
输出只需要
<div>{{ state.count }}</div> ===>0
<div>{{ state1.count }}</div> ===>1
在里面使用的话
console.log(state.couont) ===>0
console.log(state1.couont) ===> 报错 解决方法:state1.value.count
//3.reactive和ref的属性结构后赋值后，后来的值会失去响应
const state = reactive({ count: 0 })
const state1 = ref({ count: 0 });
let m = state.count
let n = state1.value.count
const add = () => {
state.count++
state1.value.count++
console.log(m,n) ===>只会一直是0 0
}
watch(n,(val)=>{
console.log(n)
})
watch(m,(val)=>{
console.log(m) ===>监听也不会触发
})
watch(n,(val)=>{
console.log(n) ===>监听也不会触发
})
