快捷導航

Vue3中的Refs和Ref詳情

更新時間：2021年11月10日 16:55:37 作者：飛鷹

這篇文章主要介紹了Vue3中的Refs和Ref，文章圍繞Vue3中的Refs和Ref得相關(guān)資料應(yīng)用舉例煩人方式展開詳細內(nèi)容,需要的朋友可以參考一下

小編同樣和大家分享關(guān)于Vue3中的數(shù)據(jù)相應(yīng)的問題，下面我們來例舉一個這樣的例子

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

這個時候我們可能聯(lián)想到了es6中關(guān)于解構(gòu)賦值的內(nèi)容，我們是不是可以將上面例子中的nameObj通過結(jié)果解構(gòu)的方式獲取內(nèi)部的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')

在實際運行中，我們發(fā)現(xiàn)，頁面上的內(nèi)容并沒有變成hanmeimei，這個時候，我們需要引入Vue3中的另外一個內(nèi)容，我們應(yīng)該把代碼修改成這樣，才能實現(xiàn)數(shù)據(jù)和頁面的響應(yīng)式

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

到此這篇關(guān)于Vue3中的Refs和Ref詳情的文章就介紹到這了,更多相關(guān)Vue3中的Refs和Ref內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: