const title = ref("Hello, Vue 3!");ref 接收参数并将其包裹在一个带有 value 属性的对象中返回,然后可以使用该属性访问或更改响应式变量的值,比如上面的代码我们使用 count.v
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构建响应式变量失效如何解决的详细内容,更多请关注编程网其它相关文章!
--结束END--
本文标题: Vue3 ref构建响应式变量失效如何解决
本文链接: https://www.lsjlt.com/news/208270.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-25
2023-05-24
2023-05-24
2023-05-24
2023-05-24
2023-05-24
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0