快捷導(dǎo)航

Vue3中的Refs和Ref詳情

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

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

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

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

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

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

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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue項(xiàng)目中vue-i18n和element-ui國(guó)際化開發(fā)實(shí)現(xiàn)過(guò)程
這篇文章主要介紹了vue項(xiàng)目中vue-i18n和element-ui國(guó)際化開發(fā)實(shí)現(xiàn)過(guò)程，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
2018-04-04
VueJs組件prop驗(yàn)證簡(jiǎn)單介紹
今天看了vuejs的組件，看到了prop組件，主要作用是在傳入數(shù)據(jù)的時(shí)候?qū)魅氲闹底雠袛?，今天小編通過(guò)一個(gè)小例子給大家分享VueJs組件prop驗(yàn)證簡(jiǎn)單理解，感興趣的朋友一起看看吧
2017-09-09
解析vue data不可以使用箭頭函數(shù)問(wèn)題
這篇文章主要介紹了vue data不可以使用箭頭函數(shù)問(wèn)題，本文通過(guò)源碼解析給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-07-07
vue設(shè)置全局變量5種方法(讓你的數(shù)據(jù)無(wú)處不在)
這篇文章主要給大家介紹了關(guān)于vue設(shè)置全局變量的5種方法,通過(guò)設(shè)置的方法可以讓你的數(shù)據(jù)無(wú)處不在,在項(xiàng)目中經(jīng)常會(huì)復(fù)用一些變量和函數(shù),比如用戶的登錄token,用戶信息等,這時(shí)將它們?cè)O(shè)為全局的就顯得很重要了,需要的朋友可以參考下
2023-11-11
Vue+tracking.js 實(shí)現(xiàn)前端人臉檢測(cè)功能
這篇文章主要介紹了Vue+tracking.js 實(shí)現(xiàn)前端人臉檢測(cè)功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-04-04
vue實(shí)現(xiàn)移動(dòng)端div拖動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動(dòng)端div拖動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
vue + element動(dòng)態(tài)多表頭與動(dòng)態(tài)插槽
這篇文章主要介紹了vue + element動(dòng)態(tài)多表頭與動(dòng)態(tài)插槽，下面文章圍繞vue + element動(dòng)態(tài)多表頭與動(dòng)態(tài)插槽的相關(guān)資料展開文章的內(nèi)容，具有一定的參考價(jià)值，需要的小伙伴可以參考一下，希望對(duì)大家有所幫助
2021-12-12
基于Vue.js實(shí)現(xiàn)簡(jiǎn)單搜索框
這篇文章主要為大家詳細(xì)介紹了基于Vue.js實(shí)現(xiàn)簡(jiǎn)單搜索框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-11-11
vue的全局提示框組件實(shí)例代碼
這篇文章主要介紹了vue的全局提示框組件實(shí)例代碼,需要的朋友可以參考下
2018-02-02
基于Vue實(shí)現(xiàn)自定義組件的方式引入圖標(biāo)
在vue項(xiàng)目中我們經(jīng)常遇到圖標(biāo),下面這篇文章主要給大家介紹了關(guān)于如何基于Vue實(shí)現(xiàn)自定義組件的方式引入圖標(biāo)的相關(guān)資料,文章通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2021-07-07