关于javascript: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')

又是前端提高的一天，一起加油！
大家还能够关注我的微信公众号，蜗牛全栈。