Vue3为何推荐使用ref而不是reactive？
首先二者的异同点是：
1.ref 用于将基本类型的数据（如字符串、数字，布尔值等）和引用数据类型(对象)转换为响应式数据。使用 ref 定义的数据可以通过.value属性访问和修改。
ref声明使用：
ref声明 let num = ref(0);let arr = ref([]);
ref使用 num.value = 2; arr.value = [1,2,3];
2.reactive 用于将对象转换为响应式数据，包括复杂的嵌套对象和数组。使用 reactive 定义的数据可以直接访问和修改属性。
reactive声明使用：
声明： let obj= reactive({nunm:1}); let arr= reactive([1,2,3]);
使用：obj.num = 2; arr[0] = 3;
原因一：reacitve功能单一，只能声明引用数据类型，而无法声明基本数据类型。而ref既可以声明基本数据类型，也可以声明引用数据类型。
注意: 如果使用reactive声明基础数据类型并不会报错，但是声明的变量不具备响应式的特点，无法达到数据驱动改变视图更新的基本需求，所以这种使用方式不推荐使用。
原因二：reactive使用不当会失去响应。
let state = reactive({count:0});
state = {count: 10}; 这样直接赋值一整个对象会导致数据更新，但DOM没有同步更新从而失去响应式。
注意：reactive声明的对象在解构赋值后会丢失响应性，需要配合使用toRefs方法。
例如：const state = reactive({ count :0});
let { count } = toRefs(state);
count += 1；
需要这样结构，count才会同步更改。
解决办法：需要一个个赋值，state.count = 10,这样赋值才会保持响应性，保证数据和视图同步更新。
