Vue2 0 set 的正確使用方式

2021-10-14 15:39:45 字數 443 閱讀 9531

vue2.0給物件新增屬性,並出發檢視更新

如下**,給student物件新增age屬性

data() 

}}

眾所周知,直接給student賦值操作,雖然可以新增屬性,但是不會出發檢視更新

mounted()
原因是:受 es5 的限制,vue.js 不能檢測到物件屬性的新增或刪除。因為 vue.js 在初始化例項時將屬性轉為 getter/setter,所以屬性必須在 data 物件上才能讓 vue.js 轉換它,才能讓它是響應的。

要處理這種情況,我們可以使用$set()方法,既可以新增屬性,又可以觸發檢視更新。

mounted ()

Vue2 0 set 的正確使用方式

vue.set 引數 引數 target keyvalue 返回值 設定的值。實現原理 vue.set 原始碼 import from observer index vue.set set this.set 原始碼 import from observer index vue.prototype.s...

Vue2 0 set 的正確使用方式

如下 給 student物件新增 age 屬性 data 眾所周知,直接給student賦值操作,雖然可以新增屬性,但是不會觸發檢視更新 mounted 原因是 受 es5 的限制,vue.js 不能檢測到物件屬性的新增或刪除。因為 vue.js 在初始化例項時將屬性轉為 getter setter...

Vue 2 0 set 的正確使用方式

陣列用下標改變,或者物件增加屬性,這樣的改變資料是不能觸發檢視更新的,要用 vue.set 物件,屬性,值 或 this.set 物件,屬性,值 如下 給 student物件新增 age 屬性 data 眾所周知,直接給student賦值操作,雖然可以新增屬性,但是不會觸發檢視更新 mounted ...