Vue進階（九十八）：Vue.set()和this.$set()介紹

場景

有時候我們會看到如下代碼：

在我們使用vue進行開發(fā)的過程中，可能會遇到一種情況：當生成vue實例后，當再次給對象賦值時，有時候并不會自動更新到視圖上去； 當我們?nèi)タ磛ue文檔的時候，會發(fā)現(xiàn)有這么一句話：如果在實例創(chuàng)建之后添加新的屬性到實例上，它不會觸發(fā)視圖更新。 如下代碼，給 student對象新增 age 屬性。

data () { return { student: { name: '', sex: '' } } } mounted () { // ——鉤子函數(shù)，實例掛載之后 this.student.age = 24 }

1

2

3

4

5

6

7

8

9

10

11

受 ES5 的限制，Vue.js 不能檢測到對象屬性的添加或刪除，即Vue未做到臟數(shù)據(jù)檢查。因為 Vue.js 在初始化實例時將屬性轉(zhuǎn)為 getter/setter，所以屬性必須在 data 對象上才能讓 Vue.js 轉(zhuǎn)換它，才能讓它是響應(yīng)的。

正確寫法：this.$set(this.data,”key”,value')

mounted () { this.$set(this.student,"age", 24) }

1

2

3

Vue 不允許動態(tài)添加根級響應(yīng)式屬性。

例如：

const app = new Vue({ data: { a: 1 } // render: h => h(Suduko) }).$mount('#app1') Vue.set(app.data, 'b', 2)

1

2

3

4

5

6

7

8

此時控制臺會報錯：

只可以使用 Vue.set(object, propertyName, value) 方法向嵌套對象添加響應(yīng)式屬性，例如

var vm=new Vue({ el:'#test', data:{ //data中已經(jīng)存在info根屬性 info:{ name:'小明'; } } }); //給info添加一個性別屬性 Vue.set(vm.info,'sex','男');

1

2

3

4

5

6

7

8

9

10

11

有童鞋可能會問之前使用過Vue.set()，this.$set()與Vue.set有什么聯(lián)系呢？

Vue.set()和this.$set()實現(xiàn)原理

源碼分析

我們先來看看Vue.set()的源碼：

import { set } from '../observer/index' ... Vue.set = set ...

1

2

3

4

5

再來看看this.$set()的源碼：

import { set } from '../observer/index' ... Vue.prototype.$set = set ...

1

2

3

4

5

我們發(fā)現(xiàn)Vue.set()和this.$set()這兩個api的實現(xiàn)原理基本一模一樣，都是使用了set函數(shù)。set函數(shù)是從 …/observer/index 文件中導出的，區(qū)別在于Vue.set()是將set函數(shù)綁定在Vue構(gòu)造函數(shù)上，this.$set()是將set函數(shù)綁定在Vue原型上。

再來看下set源碼：

function set (target: Array | Object, key: any, val: any): any { if (process.env.NODE_ENV !== 'production' && (isUndef(target) || isPrimitive(target)) ) { warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`) } if (Array.isArray(target) && isValidArrayIndex(key)) { target.length = Math.max(target.length, key) target.splice(key, 1, val) return val } if (key in target && !(key in Object.prototype)) { target[key] = val return val } const ob = (target: any).__ob__ if (target._isVue || (ob && ob.vmCount)) { process.env.NODE_ENV !== 'production' && warn( 'Avoid adding reactive properties to a Vue instance or its root $data ' + 'at runtime - declare it upfront in the data option.' ) return val } if (!ob) { target[key] = val return val } defineReactive(ob.value, key, val) ob.dep.notify() return val }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

我們發(fā)現(xiàn)set函數(shù)接收三個參數(shù)分別為 target、key、val，其中target的值為數(shù)組或者對象，這正好和官網(wǎng)給出的調(diào)用Vue.set()方法時傳入的參數(shù)參數(shù)對應(yīng)上。

Vue

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔相應(yīng)法律責任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔相應(yīng)法律責任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。