vue3的Composition API之reactive和ref的区别

        reactive和ref都可以用来创建响应式数据，但它们适用于不同的场景。reactive适用于需要创建响应式对象的场景，而ref适用于需要创建响应式基本类型值的场景。
1、 reactive：reactive用于创建一个响应式对象。这个方法接收一个普通的JavaScript对象，并返回该对象的响应式代理。可以用这个代理来访问和修改原始对象的属性，所有的修改都会被Vue跟踪并触发视图的更新。

import { reactive } from 'vue';

const obj = reactive({
  value: 0
});
//打印数据
console.log(obj)

2、ref：ref用于创建一个响应式引用。这个方法接收一个值，并返回一个具有.value属性的对象。可以通过.value属性来访问和修改原始值，所有的修改都会被Vue跟踪并触发视图的更新。

import { ref } from 'vue';

const test = ref(0);
//打印数据
console.log(test.value)

注意：如果解构reactive创建的对象，实际上是在创建原始对象属性的新引用，这些新引用不再是响应式的，因为它们不再被代理对象跟踪。而使用ref创建一个响应式引用时，Vue会返回一个对象，这个对象有一个.value属性，这个属性指向原始值。解构这个对象时，实际上是在创建.value属性的新引用，这个新引用仍然是响应式的，因为它仍然指向.value属性。