Vue2動態(tài)添加屬性導(dǎo)致頁面不更新的原因與解決方案
一、問題示例
我們先來看一個簡單的例子：
<div id="app">
<p v-for="(value, key) in item" :key="key">
{{ value }}
</p>
<button @click="addProperty">動態(tài)添加新屬性</button>
</div>
Vue 實例代碼如下：
const app = new Vue({
el: "#app",
data: () => ({
item: {
oldProperty: "舊屬性"
}
}),
methods: {
addProperty() {
this.item.newProperty = "新屬性"; // 動態(tài)添加新屬性
console.log(this.item); // 數(shù)據(jù)確實更新了
}
}
});
點擊按鈕后，console 能打印出帶有 newProperty 的對象，但頁面上并沒有新增一行。
二、原理分析
為什么會出現(xiàn)這種情況？
Vue2 的響應(yīng)式系統(tǒng)是基于 Object.defineProperty 實現(xiàn)的。
const obj = {};
let val = "初始值";
Object.defineProperty(obj, "foo", {
get() {
console.log(`get foo: ${val}`);
return val;
},
set(newVal) {
if (newVal !== val) {
console.log(`set foo: ${newVal}`);
val = newVal;
}
}
});
當訪問或修改 foo 時，會觸發(fā) getter/setter。但如果直接新增屬性：
obj.bar = "新屬性";
此時 bar 并沒有通過 Object.defineProperty 設(shè)置攔截，因此不是響應(yīng)式屬性。
這正是 Vue2 無法檢測到新屬性的原因。
三、解決方案
Vue2 不允許在已創(chuàng)建的實例上直接新增響應(yīng)式屬性，但我們有幾種方式來解決：
1. 使用 Vue.set()
Vue.set(this.item, "newProperty", "新屬性");
這樣 Vue 會調(diào)用內(nèi)部的 defineReactive，為新屬性建立響應(yīng)式綁定，并觸發(fā)視圖更新。
簡化源碼邏輯如下：
function set(target, key, val) {
defineReactive(target, key, val);
dep.notify(); // 通知視圖更新
return val;
}
2. 使用 Object.assign()
直接使用 Object.assign() 并不能觸發(fā)更新，但如果創(chuàng)建一個新對象賦值給原對象，就可以：
this.item = Object.assign({}, this.item, { newProperty: "新屬性" });
這種方式適合一次性添加多個屬性。
3. 使用 $forceUpdate()
強制讓 Vue 實例重新渲染：
this.item.newProperty = "新屬性"; this.$forceUpdate();
不過，這種方式不推薦，因為大多數(shù)情況下說明代碼結(jié)構(gòu)存在問題。
四、小結(jié)
- 少量新增屬性 → 使用
Vue.set()。 - 大量新增屬性 → 使用
Object.assign()創(chuàng)建新對象。 - 臨時解決方案 → 使用
$forceUpdate()強制刷新（不建議）。
需要注意的是：Vue3 使用 Proxy 實現(xiàn)響應(yīng)式，可以直接動態(tài)添加屬性，依然能觸發(fā)更新，不再存在這個問題。
到此這篇關(guān)于Vue2動態(tài)添加屬性導(dǎo)致頁面不更新的原因與解決方案的文章就介紹到這了,更多相關(guān)Vue2動態(tài)添加屬性頁面不更新內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了Element el-upload上傳組件使用詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
Vue.js 是一個流行的前端框架,它提供了多種方法來實現(xiàn)數(shù)據(jù)的雙向綁定和事件處理,在構(gòu)建表單時,我們經(jīng)常需要實現(xiàn)清空輸入框的功能,本文將介紹兩種在Vue中實現(xiàn)輸入框清空功能的方法,感興趣的小伙伴跟著小編一起來看看吧2024-12-12
路由是網(wǎng)絡(luò)工程里面的專業(yè)術(shù)語，就是通過互聯(lián)把信息從源地址傳輸?shù)侥康牡刂返幕顒?。本質(zhì)上就是一種對應(yīng)關(guān)系。分為前端路由和后端路由。小編將再下面文章為大家做詳細介紹，感興趣的小伙伴請和小編一起來學(xué)習(xí)吧2021-09-09
這篇文章主要給大家分享介紹了關(guān)于動態(tài)Axios的配置步驟，文中通過示例代碼介紹的非常詳細，通過這個教程大家可以很方便的實現(xiàn)動態(tài)Axios的配置，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
vue?3.0使用element-plus按需導(dǎo)入方法以及報錯解決
Vue3是不能直接使用Element-ui了,需要換成Element-plus,下面這篇文章主要給大家介紹了關(guān)于vue?3.0使用element-plus按需導(dǎo)入方法以及報錯解決的相關(guān)資料,需要的朋友可以參考下2024-02-02
大家在寫vue項目的時候會遇到給組件的各種命名，接下來通過本文給大家分享vue組件name的作用小結(jié)，感興趣的朋友跟隨腳本之家小編一起看看吧2018-05-05
Vue中watch監(jiān)聽屬性新舊值相同的問題解決方案
這篇文章主要給大家分享了Vue中watch監(jiān)聽屬性新舊值相同問題解決方案,如果有遇到相同問題的朋友,可以參考閱讀本文2023-08-08
這篇文章主要為大家詳細介紹了基于vue2實現(xiàn)上拉加載功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了vue修改swiper框架輪播圖小圓點的樣式不起作用的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本篇文章主要介紹了淺談Vue SPA 首屏加載優(yōu)化實踐，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12