vue3 取消ref响应式

在Vue 3中，取消了对`ref`的直接响应式支持。取而代之的是，Vue 3引入了一个新的响应式API，即`reactive`函数。使用`reactive`函数可以将一个普通的JavaScript对象转换为响应式对象。下面是一个示例：

import { reactive } from 'vue';

const data = reactive({
  foo: 'bar',
  baz: {
    qux: 'quux'
  }
});

console.log(data.foo); // 输出: 'bar'
data.foo = 'hello';
console.log(data.foo); // 输出: 'hello'

通过使用`reactive`函数，我们可以创建一个具有响应式特性的对象，而不再需要使用`ref`函数来包装一个基本类型的值。注意，对于响应式对象中嵌套的属性，也会自动成为响应式的。

另外，如果你想要获取响应式对象中的某个属性的值，可以使用`toRefs`函数将响应式对象转换为普通对象，然后再取得对应属性的值。例如：

import { reactive, toRefs } from 'vue';

const data = reactive({
  foo: 'bar'
});

const { foo } = toRefs(data);
console.log(foo.value); // 输出: 'bar'

这就是Vue 3中取消`ref`响应式支持的方式，并引入新的`reactive`函数来实现对象的响应式。