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,这样赋值才会保持响应性，保证数据和视图同步更新。