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

又是前端进步的一天，一起加油！