vue3?reactive數(shù)據(jù)更新視圖不更新問題解決
更新時間：2023年06月29日 11:50:39 作者：w晚風(fēng)
這篇文章主要為大家介紹了vue3?reactive數(shù)據(jù)更新視圖不更新問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
vue3 通過reactive 做響應(yīng)式處理
初次使用vue3 通過reactive 做響應(yīng)式處理時，發(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)部再加個對象
修改
<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>通過這種方式確實會更新視圖。具體內(nèi)部方法實現(xiàn)我暫未去看源碼內(nèi)部實現(xiàn)，待后續(xù)再看
以上就是vue3 reactive數(shù)據(jù)更新視圖不更新問題解決的詳細內(nèi)容，更多關(guān)于vue3 reactive數(shù)據(jù)視圖更新的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家總結(jié)了vue2.0開發(fā)實踐的疑難,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了Vue.js之組件系統(tǒng),本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05
這篇文章主要介紹了基于el-tree實現(xiàn)懶加載穿梭條的示例代碼,本文通過示例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-03-03
淺談vue 組件中的setInterval方法和window的不同
這篇文章主要介紹了淺談vue 組件中的setInterval方法和window的不同，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue el-upload手動上傳實現(xiàn)過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
在VUE開發(fā)項目的過程中,插槽<slot>是重要的承載分發(fā)內(nèi)容的出口,下面這篇文章主要給大家介紹了關(guān)于Vue3插槽(slot)使用的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了解決vue生產(chǎn)環(huán)境,頁面卡死的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
ref用來輔助開發(fā)者在不依賴于jQuery的情況下,獲取DOM元素或組件的引用,下面這篇文章主要給大家介紹了關(guān)于Vue混合文件使用以及ref的引用的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要給大家介紹了關(guān)于Vue記住滾動條和實現(xiàn)下拉加載的完美方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
關(guān)于Vue3父子組件emit參數(shù)傳遞問題(解決Vue2this.$emit無效問題)
相信很多人在利用事件驅(qū)動向父組件扔?xùn)|西的時候，發(fā)現(xiàn)原來最常用的this.$emit咋報錯了,竟然用不了了,下面通過本文給大家分享關(guān)于Vue3父子組件emit參數(shù)傳遞問題(解決Vue2this.$emit無效問題),需要的朋友可以參考下2022-07-07