如何理解Vue3中的Refs和Ref

本篇文章為大家展示了如何理解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')

上述內容就是如何理解Vue3中的Refs和Ref，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。