Vue2 0 set 的正確使用方式

2021-09-11 23:04:36 字數 537 閱讀 4716

vue.set 引數

引數: target

keyvalue

返回值:設定的值。

實現原理

vue.set()原始碼:

import  from '../observer/index'

...vue.set = set

...

this.$set()原始碼

import  from '../observer/index'

...vue.prototype.$set = set

...

結果我們發現vue.set()this.$set()這兩個api的實現原理基本一模一樣,都是使用了set函式。set函式是從 …/observer/index 檔案中匯出的,區別在於vue.set()是將set函式繫結在vue建構函式上,this.$set()是將set函式繫結在vue原型上

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

Vue2 0 set 的正確使用方式

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