在Vue 3中，ref和reactive都是用于创建响应式数据的方法。
ref是用来创建一个简单的响应式数据的函数。它接收一个初始值作为参数，并返回一个包含value属性的响应式对象。可以通过.value访问和修改这个值。当修改ref的值时，Vue 3会自动追踪这个变化，并在需要时更新相关的视图。
值得一提的是，在vue3中，所有的api都是需要使用者进行自己引入的。
import { ref } from 'vue';
const count = ref(0);
console.log(count.value); // 输出 0
count.value = 1;
console.log(count.value); // 输出 1
reactive是用来创建一个包含多个属性的响应式对象的函数。它接收一个普通对象作为参数，并返回一个包含所有属性的响应式对象。可以直接通过属性访问和修改这些值。当修改reactive对象的属性时，Vue 3会自动追踪这些变化，并在需要时更新相关的视图。
import { reactive } from 'vue';
const user = reactive({
name: 'John',
age: 30
});
console.log(user.name); // 输出 'John'
console.log(user.age); // 输出 30
user.age = 31;
console.log(user.age); // 输出 31
需要注意的是，ref创建的是一个包装后的值，而reactive创建的是一个包含响应式属性的对象。所以在使用ref时需要通过.value来访问和修改值，而在使用reactive时可以直接通过属性来访问和修改值。
除了上面提到的差别，ref和reactive在原理和性能方面也存在一些差异。
-
原理：
ref使用了ES6的Proxy对象来实现响应式。ref在内部会创建一个包装对象，通过Proxy拦截对该对象的访问，并在访问或修改值时触发依赖追踪和更新。reactive使用了ES6的Proxy对象和Reflect对象来实现响应式。reactive在内部会创建一个代理对象，通过Proxy拦截对该对象的访问，并在访问或修改属性时触发依赖追踪和更新。
-
性能：
ref相对于reactive来说，性能更高效。由于ref创建的是一个简单的响应式数据，它只需要追踪单个值的变化，因此在访问和修改值时的性能更好。reactive相对于ref来说，性能稍低。由于reactive创建的是一个包含多个属性的响应式对象，它需要追踪多个属性的变化，因此在访问和修改属性时的性能相对较低。
从更底层的角度来分析ref和reactive的差异
响应式追踪的粒度：
ref的响应式追踪是基于值的，即只有当ref的值发生变化时，才会触发依赖更新。这意味着只有对ref进行赋值操作时，才会触发重新渲染。reactive的响应式追踪是基于属性的，即当reactive对象的属性发生变化时，会触发依赖更新。这意味着只要对reactive对象的属性进行修改，不论是赋值操作还是直接修改属性的某个值，都会触发重新渲染。
总的来说，ref和reactive都是用于创建响应式数据的方法，但在底层实现和响应式追踪的粒度上存在差异。ref适用于创建简单的响应式数据，而reactive适用于创建包含多个属性的响应式对象。在性能要求较高的情况下，可以优先选择ref。在需要创建复杂的响应式对象时，可以使用reactive。
