vue3?reactive數據更新視圖不更新問題解決
更新時間：2023年06月29日 11:50:39 作者：w晚風
這篇文章主要為大家介紹了vue3?reactive數據更新視圖不更新問題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
vue3 通過reactive 做響應式處理
初次使用vue3 通過reactive 做響應式處理時，發(fā)現更新了數據，試圖不更新問題。
代碼
<template>
<div>
<div>
數據：{{ dataList.name }}
</div>
<el-button type="primary" @click="btnFn()">修改數據</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>查閱資料說是需要內部再加個對象
修改
<template>
<div>
<div>
數據：{{ dataList.data.name }}
</div>
<el-button type="primary" @click="btnFn()">修改數據</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>通過這種方式確實會更新視圖。具體內部方法實現我暫未去看源碼內部實現，待后續(xù)再看
以上就是vue3 reactive數據更新視圖不更新問題解決的詳細內容，更多關于vue3 reactive數據視圖更新的資料請關注腳本之家其它相關文章！
相關文章
vue?element-ui動態(tài)橫向統(tǒng)計表格的實現
這篇文章主要介紹了vue?element-ui動態(tài)橫向統(tǒng)計表格的實現方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家總結了vue2.0開發(fā)實踐之入門,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
Vue3解決ElementPlus自動導入時ElMessage無法顯示的問題
這篇文章主要介紹了Vue3解決ElementPlus自動導入時ElMessage無法顯示的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細介紹了vue.js事件循環(huán)機制，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要介紹了Vue中jsx不完全應用指南小結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
swiper是我之前做前端頁面會用到的一個插件,我自己認為是非常好用的。這篇文章給大家介紹vue-swiper的使用教程，感興趣的朋友一起看看吧2018-08-08
這篇文章主要介紹了Vue3中進行頁面局部刷新組件刷新的操作方法,本文結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
在Vue項目中,你可以使用路由（vue-router）來實現頁面跳轉并傳遞參數,這篇文章主要為大家整理了一些常用的方法,感興趣的小伙伴可以學習一下2023-11-11
vue 解決addRoutes動態(tài)添加路由后刷新失效問題
這篇文章主要介紹了vue 解決addRoutes動態(tài)添加路由后刷新失效問題，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
解決Antd 里面的select 選擇框聯(lián)動觸發(fā)的問題
這篇文章主要介紹了解決Antd 里面的select 選擇框聯(lián)動觸發(fā)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10