Vue3中的Refs和Ref详情
makebo · 180浏览 · 发布于2021-11-11
这篇文章主要介绍了Vue3中的Refs和Ref,文章围绕Vue3中的Refs和Ref得相关资料应用举例烦人方式展开详细内容,需要的朋友可以参考一下
小编同样和大家分享关于Vue3中的数据相应的问题,下面我们来例举一个这样的例子
Vue.createApp({ template: `<div>{{ nameObj.name }}</div>`, setup() { const { reactive } = Vue const nameObj = reactive({name:'lilei',age:18}) setTimeout(() => { nameObj.name = 'hanmeimei' },2000) return { nameObj } } }).mount('#root')
这个时候我们可能联想到了es6
中关于解构赋值的内容,我们是不是可以将上面例子中的nameObj
通过结果解构的方式获取内部的name
,然后直接将name
返回呢?也就是将代码写成这样
Vue.createApp({ template: `<div>{{ name }}</div>`, setup() { const { reactive,toRefs } = Vue const nameObj = reactive({name:'lilei',age:18}) let { name } = nameObj setTimeout(() => { name.value = 'hanmeimei' },2000) return { name } } }).mount('#root')
在实际运行中,我们发现,页面上的内容并没有变成hanmeimei
,这个时候,我们需要引入Vue3
中的另外一个内容,我们应该把代码修改成这样,才能实现数据和页面的响应式
Vue.createApp({ template: `<div>{{ name }}</div>`, setup() { const { reactive,toRefs } = Vue const nameObj = reactive({name:'lilei',age:18}) let { name } = toRefs(nameObj) setTimeout(() => { name.value = 'hanmeimei' },2000) return { name } } }).mount('#root')
同样,和toRefs
很类似的还有toRef
,代码实例是这样的
Vue.createApp({ template: `<div>{{ age }}</div>`, setup() { const { reactive,toRef } = Vue const nameObj = reactive({name:'lilei'}) let age = toRef(nameObj,'age') setTimeout(() => { age.value = 'hanmeimei' },2000) return { age } } }).mount('#root')
相关推荐
PHP实现部分字符隐藏
沙雕mars · 1322浏览 · 2019-04-28 09:47:56
Java中ArrayList和LinkedList区别
kenrry1992 · 906浏览 · 2019-05-08 21:14:54
5月语言排行榜:R 跌出前二十,Python 紧咬 C++
manongba · 685浏览 · 2019-05-09 17:27:24
Tomcat 下载及安装配置
manongba · 966浏览 · 2019-05-13 21:03:56
什么是SpringBoot
iamitnan · 1084浏览 · 2019-05-14 22:20:36
分类专栏
最新发布
最热排行
0评论