在 data 中创建的属性，全都用 ref() 声明。
在 template 中直接用，在 script 中记得加 .value 。
1）写法对比
// Vue2 的写法
?Vue3:
a、ref 和 reactive
Vue3 里，还提供了一个叫做 reactive 的 api。
但是我的建议是，你不需要关心它。绝大多数场景下，ref 都够用了。
b、什么时候用 ref() 包裹，什么时候不用。
要不要用ref，就看你的这个变量的值改变了以后，页面要不要跟着变。
当然&3的写法#xff0c;你可以完全不需要关心这一点，跟过去写 data 一样就行。
只不过这样做，你在使用的时候，需要一直 .value。
c、不要解构使用
在使用时，不要像下面这样去写，会丢失响应性。
也就是会出现更新了值，但是页面没有更新的情况
ref 适用于简单的响应式数据，而 reactive 则适用于复杂对象或数组的响应式数据。
ref：
- 将一个普通的 JavaScript 值包装成响应式的引用类型。可以理解为 ref 是对普通值的包装。
- 使用 .value 属性来访问和修改值。
reactive：
- 将一个普通的 JavaScript 对象（或数组）转换为响应式代理对象。可以理解为 reactive 是对对象（或数组）的包装。
- 可以直接访问和修改对象或数组的属性或元素，而无需使用 .value。
// Vue3 的写法
?reactive：
声明事件方法，我们只需要在 script 标签里，创建一个方法对象即可。
剩下的在 Vue2 里是怎么写的，Vue3 是同样的写法。
// Vue2 的写法
?
声明 props 我们可以用 defineProps()，具体写法，我们看代码。
1）写法对比
// Vue2 的写法
?// Vue3 的写法
2）注意事项——组合式 api 的心智负担
使用 props 时，同样注意不要使用解构的方式。
与 
props 相同，声明 emits 我们可以用 defineEmits()，具体写法，我们看代码。
// Vue2 的写法
?// Vue3 的写法
?
直接上写法对比。
// Vue2 的写法
?// Vue3 的写法
?
6、watch
这一部分，我们需要注意一下了，Vue3 中，watch 有两种写法。一种是直接使用 watch，还有一种是使用 watchEffect。
两种写法的区别是：
watch 需要你明确指定依赖的变量，才能做到监听效果。
而 watchEffect 会根据你使用的变量，自动的实现监听效果。
1）直接使用 watch
// Vue2 的写法
// Vue3 的写法
2）使用 watchEffect
// Vue2 的写法?
vue3
?
Vue3 里，除了将两个 destroy 相关的钩子，改成了 unmount，剩下的需要注意的，就是在
?// 组合式 api 写法
参考：
带你了解vue3组合式api基本写法_vue编写api-CSDN博客
