Refs and Refs in Vue3

The editor also shares some questions about the data in Vue3, which we wrote about earlier. You can also follow my wechat public number, Snail Quanzhan.

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')
Copy the code

In the example above, we can get the internal name of nameObj through result deconstruction, and then return the name directly. So I’m going to write the code like this

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')
Copy the code

In the actual operation, we found that the content on the page did not become Hanmeimei, at this time, we need to introduce another content in Vue3, we should modify the code in this way, in order to realize the responsiveness of data and page

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')
Copy the code

Also, much like toRefs, toRef looks like this

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')
Copy the code

Another day of front-end progress, come on!