Vue3中的Refs和Ref

小编也给大家分享一下Vue3中数据的相应问题。之前，我们写了这样一个例子Vue.createApp({template:`

`,setup(){const{reactive}=VueconstnameObj=reactive({name:'lilei',age:18})setTimeout(()=>{nameObj.name='hanmeimei'},2000)return{nameObj}}}).mount('#root')这时候我们可能会想到es6中解构赋值的内容。是不是可以通过解构result得到上面例子中的nameObj的内部名称，然后直接返回这个名称呢？也就是这样写代码Vue.createApp({template:``,setup(){const{reactive,toRefs}=VueconstnameObj=reactive({name:'lilei',age:18})let{name}=nameObjsetTimeout(()=>{name.value='hanmeimei'},2000)return{name}}}).mount('#root')实际上运行，我们发现页面上的内容并没有变成韩美美。这个时候我们需要引入Vue3中的另一个内容。我们应该将代码修改成这种方式来实现数据和页面的响应式。Vue.createApp({template:``,setup(){const{reactive,toRefs}=VueconstnameObj=reactive({name:'lilei',age:18})let{name}=toRefs(nameObj)setTimeout(()=>{name.value='hanmeimei'},2000)return{name}}}).mount('#root')同样，toRef和toRefs很相似，代码示例是这样的Vue.createApp({template:``,setup(){const{reactive,toRef}=VueconstnameObj=reactive({name:'lilei'})letage=toRef(nameObj,'age')setTimeout(()=>{age.value='hanmeimei'},2000)return{age}}}).mount('#root')又是前端进步的一天，一起加油吧！也可以关注我的微信公众号，蜗牛全栈。