1、属性定义ref、reactive、shallowRef、shallowReactive
ref与reactive定义的属性具有深度响应；
shallowRef、shallowReactive对象的浅层响应，即只有对象本身变化才会被检测；
1、ref
- 支持基础类型、非原始类型、Map、Set等集合类型;
- ref调用的对象具有深层响应，即对象内部属性值变化也会被检测到;
- js中使用时需要增加.value，dom中不需要;
- ref内部使用get、set方法进行值变化监测;
- 一个ref作为响应式对象属性的属性被访问或修改，会被解包；访问不需要增加.value;
例如：const count = ref(0); const state = reactive({count}); console.log(state.count); // 0
- 一个ref作为响应式数组或原生集合（Map、Set）的元素被访问不会解包，访问需要增加.value；
例如：const books = reactive([ref('Vue 3 Guide')]) // 这里需要 .value console.log(books[0].value)
2、 reactive
- 仅支持对象类型，例如：数组、对象、Map、Set等；
- 内部使用proxy进行代理，则原对象不具备响应。对同一个对象调用reactive返回同一个代理对象；
- 使用reactive将使对象本身具有响应性，即使用时无需增加.value
- 不能替换整个对象，因会对原对象失去响应追踪
- 当对响应式对象进行解构赋值给本地变量后，或将该属性传递给函数时，响应将丢失
