脚本宝典收集整理的这篇文章主要介绍了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详情的文章就介绍到这了,更多相关Vue3中的Refs和Ref内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的Vue3中的Refs和Ref详情全部内容，希望文章能够帮你解决Vue3中的Refs和Ref详情所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。