如何理解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')

上述内容就是如何理解Vue3中的Refs和Ref，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注编程网精选频道。