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

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