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

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