Refs and Ref Details in Vue3

The editor also shares with you the corresponding problems of data in Vue3. Let's take an example like this

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

At this point, we may think of the content about destructuring assignment in es6 . Can we get the internal name of nameObj in the above example by destructuring the result, and then return name directly? That is 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')

In 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 to achieve the responsiveness of data and pages.

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

Similarly, toRefs is very similar to toRef . The code example is as follows

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

This is the end of this article about the details of Refs and Ref in Vue3. For more relevant content about Refs and Ref in Vue3, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: