Vue3 ref构建响应式变量失效如何解决

const title = ref("Hello, Vue 3!");

ref 接收参数并将其包裹在一个带有 value 属性的对象中返回，然后可以使用该属性访问或更改响应式变量的值，比如上面的代码我们使用 count.value 去修改值，如下：

title.value = "Hello, Vue3!"

上面提到了 ref 也是可以接受对象类型

const data = ref({
    author: "青年码农",
    age: "18"
});

这种也是可以的，赋值的时候就会有点别扭了。

data.value.author = "nmgwap";

ref 响应式原理是依赖于 Object.defineProperty()，因此如果是对象，还是建议用 reactive。

• reactive：

reactive 返回对象的响应式副本, 它将解包所有深层的 refs，同时维持 ref 的响应性。一般我们用来实现对象或者数组的响应性。

const data = reactive({
    author: "青年码农",
    age: "18"
});

修改和普通对象没区别，视图会实时更新

data.author = "nmgwap"

注意：

ref 是针对原始数据类型 和 reactive 是用于对象 这两个 API 都是为了给 JavaScript 普通的数据类型赋予响应式特性(reactivity)。

以上就是Vue3 ref构建响应式变量失效如何解决的详细内容，更多请关注编程网其它相关文章！