Vue2 0 set 的正確使用方式

2021-10-01 02:08:01 字數 611 閱讀 2338

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

data () 

}}

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

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

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

但是,值得注意的是,網上一些資料寫的$set()用法存在一些問題,導致在新接觸這個方法的時候會走一些彎路!

錯誤寫法:this.$set(key,value)(ps: 可能是vue1.0的寫法)

mounted ()
正確寫法:this.$set(this.data,」key」,value』)

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

Vue 2 0 set 的正確使用方式

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

Vue2 0 set 的正確使用方式

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