亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間：2023年06月29日 11:50:39   作者：w晚風(fēng)  
這篇文章主要為大家介紹了vue3?reactive數(shù)據(jù)更新視圖不更新問(wèn)題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

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

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

代碼

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

查閱資料說(shuō)是需要內(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>

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

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

相關(guān)文章

最新評(píng)論