快捷導(dǎo)航

vue3?reactive數(shù)據(jù)更新視圖不更新問題解決

更新時(shí)間：2023年06月29日 11:50:39 作者：w晚風(fēng)

這篇文章主要為大家介紹了vue3?reactive數(shù)據(jù)更新視圖不更新問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

vue3 通過reactive 做響應(yīng)式處理

初次使用vue3 通過reactive 做響應(yīng)式處理時(shí)，發(fā)現(xiàn)更新了數(shù)據(jù)，試圖不更新問題。

代碼

<template>
    <div>
        <div>
            數(shù)據(jù)：{{ dataList.name }}
        </div>
        <el-button type="primary" @click="btnFn()">修改數(shù)據(jù)</el-button>
    </div>
</template>
<script lang="ts" setup>
    import {
        reactive,
    } from 'vue'
    let dataList = reactive({
        name:'張三',
    });
    const btnFn = async () => {
        dataList = {
            name:'李四',
        };
        console.log(dataList)
    }
</script>

查閱資料說是需要內(nèi)部再加個(gè)對(duì)象

修改

<template>
    <div>
        <div>
            數(shù)據(jù)：{{ dataList.data.name }}
        </div>
        <el-button type="primary" @click="btnFn()">修改數(shù)據(jù)</el-button>
    </div>
</template>
<script lang="ts" setup>
    import {
        reactive,
    } from 'vue'
    const dataList = reactive({
        data: {
            name: '張三',
        }
    });
    const btnFn = async () => {
        dataList.data = {
            name: '李四',
        };
        console.log(dataList)
    }
</script>

通過這種方式確實(shí)會(huì)更新視圖。具體內(nèi)部方法實(shí)現(xiàn)我暫未去看源碼內(nèi)部實(shí)現(xiàn)，待后續(xù)再看

以上就是vue3 reactive數(shù)據(jù)更新視圖不更新問題解決的詳細(xì)內(nèi)容，更多關(guān)于vue3 reactive數(shù)據(jù)視圖更新的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

vue2.0開發(fā)實(shí)踐總結(jié)之疑難篇
這篇文章主要為大家總結(jié)了vue2.0開發(fā)實(shí)踐的疑難,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
Vue.js中的組件系統(tǒng)
這篇文章主要介紹了Vue.js之組件系統(tǒng),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-05-05
基于el-tree實(shí)現(xiàn)懶加載穿梭條的示例代碼
這篇文章主要介紹了基于el-tree實(shí)現(xiàn)懶加載穿梭條的示例代碼,本文通過示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
2024-03-03
淺談vue 組件中的setInterval方法和window的不同
這篇文章主要介紹了淺談vue 組件中的setInterval方法和window的不同，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
vue el-upload手動(dòng)上傳實(shí)現(xiàn)過程
這篇文章主要介紹了vue el-upload手動(dòng)上傳實(shí)現(xiàn)過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-06-06
Vue3插槽(slot)使用方法詳解
在VUE開發(fā)項(xiàng)目的過程中,插槽<slot>是重要的承載分發(fā)內(nèi)容的出口,下面這篇文章主要給大家介紹了關(guān)于Vue3插槽(slot)使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11
解決vue生產(chǎn)環(huán)境,頁面卡死的問題
這篇文章主要介紹了解決vue生產(chǎn)環(huán)境,頁面卡死的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
Vue混合文件使用以及ref的引用實(shí)例詳解
ref用來輔助開發(fā)者在不依賴于jQuery的情況下,獲取DOM元素或組件的引用,下面這篇文章主要給大家介紹了關(guān)于Vue混合文件使用以及ref的引用的相關(guān)資料,需要的朋友可以參考下
2022-12-12
Vue記住滾動(dòng)條和實(shí)現(xiàn)下拉加載的完美方法
這篇文章主要給大家介紹了關(guān)于Vue記住滾動(dòng)條和實(shí)現(xiàn)下拉加載的完美方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
關(guān)于Vue3父子組件emit參數(shù)傳遞問題(解決Vue2this.$emit無效問題)
相信很多人在利用事件驅(qū)動(dòng)向父組件扔?xùn)|西的時(shí)候，發(fā)現(xiàn)原來最常用的this.$emit咋報(bào)錯(cuò)了,竟然用不了了,下面通過本文給大家分享關(guān)于Vue3父子組件emit參數(shù)傳遞問題(解決Vue2this.$emit無效問題),需要的朋友可以參考下
2022-07-07