本篇文章为大家展示了如何理解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')
上述内容就是如何理解Vue3中的Refs和Ref,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。