從vue源碼解析Vue.set()和this.$set()

前言

最近死磕了一段時(shí)間vue源碼，想想覺得還是要輸出點(diǎn)東西，我們先來從Vue提供的Vue.set()和this.$set()這兩個(gè)api看看它內(nèi)部是怎么實(shí)現(xiàn)的。

Vue.set()和this.$set()應(yīng)用的場景

平時(shí)做項(xiàng)目的時(shí)候難免不會(huì)對 數(shù)組或者對象 進(jìn)行這樣的騷操作操作，結(jié)果發(fā)現(xiàn)，咦~~，他喵的，怎么頁面沒有重新渲染。

const vueInstance = new Vue({
 data: {
  arr: [1, 2],
  obj1: {
    a: 3
  }
 }
});
vueInstance.$data.arr[0] = 3; // 這種騷操作頁面不會(huì)重新渲染
vueInstance.$data.obj1.b = 3; // 這種騷操作頁面不會(huì)重新渲染

查了一下官方文檔，發(fā)現(xiàn)人家早就說過這種情況

Vue.set()向響應(yīng)式對象中添加一個(gè)屬性，并確保這個(gè)新屬性同樣是響應(yīng)式的，且觸發(fā)視圖更新。它必須用于向響應(yīng)式對象上添加新屬性，因?yàn)?Vue 無法探測普通的新增屬性 (比如 this.myObject.newProperty = 'hi')

所以按照官網(wǎng)的寫法，我們應(yīng)該使用下面這種寫法：

Vue.set(vueInstance.$data.arr, 0, 3); // 這樣操作數(shù)組可以讓頁面重新渲染
vueInstance.$set(vueInstance.$data.arr, 0, 3); // 這樣操作數(shù)組也可以讓頁面重新渲染
Vue.set(vueInstance.$data.obj1, b, 3); // 這樣操作對象可以讓頁面重新渲染
vueInstance.$set(vueInstance.$data.obj1, b, 3); // 這樣操作對象也可以讓頁面重新渲染

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

是時(shí)候看一波這兩個(gè)api的源碼了，我們先來看看Vue.set()的源碼：

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

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

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

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

接下來我們根據(jù) ../observer/index 中找出set函數(shù)：

function set (target: Array<any> | 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
}

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

我們接著往下看：

if (process.env.NODE_ENV !== 'production' &&
  (isUndef(target) || isPrimitive(target))
 ) {
  warn(`Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`)
 }

我們先看isUndef和isPrimitive方法，從名字就可以看出，isUndef是判斷target是不是等于undefined或者null。isPrimitive是判斷target的數(shù)據(jù)類型是不是string、number、symbol、boolean中的一種。所以這里的意思是如果當(dāng)前環(huán)境不是生產(chǎn)環(huán)境并且 isUndef(target) || isPrimitive(target) 為真的時(shí)候，那么就拋出錯(cuò)誤警告。

數(shù)組的實(shí)現(xiàn)原理

接著向下看：

if (Array.isArray(target) && isValidArrayIndex(key)) {
  target.length = Math.max(target.length, key)
  target.splice(key, 1, val)
  return val
 }

這里實(shí)際就是修改數(shù)組時(shí)調(diào)用set方法時(shí)讓我們能夠觸發(fā)響應(yīng)的代碼，不過在分析這段代碼之前我們來看看vue中的數(shù)組實(shí)際上是長什么樣的。 下圖分別是vue中的數(shù)組和普通的js數(shù)組：

vue中的數(shù)組我們命名為arrVue，js中的普通數(shù)組命名為arrJs。其實(shí)我們平時(shí)調(diào)用普通數(shù)組的push、pop等方法是調(diào)用的Array原型上面定義的方法， 從圖中我們可以看出arrJs的原型是指向Array.prototype，也就是說 arrJs.__proto__ == Array.prototype 。

但是在vue的數(shù)組中，我們發(fā)現(xiàn)arrVue的原型其實(shí)不是指向的Array.prototype，而是指向的一個(gè)對象（我們這里給這個(gè)對象命名為arrayMethods）。arrayMethods上面只有7個(gè)push、pop等方法，并且arrayMethods的原型才是指向的Array.prototype。所以我們在vue中調(diào)用數(shù)組的push、pop等方法時(shí)其實(shí)不是直接調(diào)用的數(shù)組原型給我們提供的push、pop等方法，而是調(diào)用的arrayMethods給我們提供的push、pop等方法。vue為什么要給數(shù)組的原型鏈上面加上這個(gè)arrayMethods呢？這里涉及到了vue的數(shù)據(jù)響應(yīng)的原理，我們這篇文章暫時(shí)不談?wù)摂?shù)據(jù)響應(yīng)原理的具體實(shí)現(xiàn)。這里你可以理解成vue在arrayMethods對象中做過了特殊處理，如果你調(diào)用了arrayMethods提供的push、pop等7個(gè)方法，那么它會(huì)觸發(fā)當(dāng)前收集的依賴（這里收集的依賴可以暫時(shí)理解成渲染函數(shù)），導(dǎo)致頁面重新渲染。換句話說，對于數(shù)組的操作，我們只有使用arrayMethods提供的那7個(gè)方法才會(huì)導(dǎo)致頁面渲染，這也就解釋了為什么我們使用 vueInstance.$data.arr[0] = 3; 時(shí)不會(huì)導(dǎo)致頁面出現(xiàn)渲染。

搞清楚vue中的數(shù)組具體是怎么實(shí)現(xiàn)了之后，我們再來看上面的代碼：

if (Array.isArray(target) && isValidArrayIndex(key)) {
  target.length = Math.max(target.length, key)
  target.splice(key, 1, val)
  return val
 }

首先if判斷當(dāng)前target是不是數(shù)組，并且key的值是有效的數(shù)組索引。然后將target數(shù)組的長度設(shè)置為target.length和key中的最大值，這里為什么要這樣做呢?是因?yàn)槲覀兛赡軙?huì)進(jìn)行下面這種騷操作：

arr1 = [1,3];
Vue.set(arr1,10,1) // 如果不那樣做，這種情況就會(huì)出問題

接著向下看，我們發(fā)現(xiàn)這里直接調(diào)用了target.splice(key, 1, val)，在前面我們說過調(diào)用arrayMethods提供的push、pop等7個(gè)方法可以導(dǎo)致頁面重新渲染，剛好splice也是屬性arrayMethods提供的7個(gè)方法中的一種。

總結(jié)一下Vue.set數(shù)組實(shí)現(xiàn)的原理：其實(shí)Vue.set()對于數(shù)組的處理其實(shí)就是調(diào)用了splice方法，是不是發(fā)現(xiàn)其實(shí)很簡單~~

對象的實(shí)現(xiàn)原理

我們接著向下看代碼：

if (key in target && !(key in Object.prototype)) {
  target[key] = val
  return val
 }

這里先判斷如果key本來就是對象中的一個(gè)屬性，并且key不是Object原型上的屬性。說明這個(gè)key本來就在對象上面已經(jīng)定義過了的，直接修改值就可以了，可以自動(dòng)觸發(fā)響應(yīng)。

關(guān)于對象的依賴收集和觸發(fā)原理我們本文也不做詳細(xì)解釋，你可以暫時(shí)先這樣理解。vue是使用的Object.defineProperty給對象做了一層攔截，當(dāng)觸發(fā)get的時(shí)候就會(huì)進(jìn)行依賴收集（這里收集的依賴還是像數(shù)組那樣，理解成渲染函數(shù)），當(dāng)觸發(fā)set的時(shí)候就會(huì)觸發(fā)依賴，導(dǎo)致渲染函數(shù)執(zhí)行頁面重新渲染。那么第一次是在哪里觸發(fā)get的呢？其實(shí)是在首次加載頁面渲染的時(shí)候觸發(fā)的，這里會(huì)進(jìn)行遞歸將對象的屬性都依賴收集，所以我們修改對象已有屬性值得時(shí)候會(huì)導(dǎo)致頁面重新渲染。這也剛好解釋了我們使用 vueInstance.$data.obj1.b = 3; 的時(shí)候?yàn)槭裁错撁娌粫?huì)重新渲染，因?yàn)檫@里的屬性b不是對象的已有屬性，也就是說屬性b沒有進(jìn)行過依賴收集，所以才會(huì)導(dǎo)致修改屬性b的值頁面不會(huì)重新渲染。

我們接著向下看代碼：

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
 }

首先定義變量ob的值為 target.__ob__ ，這個(gè) __ob__ 屬性到底是什么對象呢？vue給響應(yīng)式對象都加了一個(gè) __ob__ 屬性，如果一個(gè)對象有這個(gè) __ob__ 屬性，那么就說明這個(gè)對象是響應(yīng)式對象，我們修改對象已有屬性的時(shí)候就會(huì)觸發(fā)頁面渲染。

target._isVue || (ob && ob.vmCount) 的意思是：當(dāng)前的target對象是vue實(shí)例對象或者是根數(shù)據(jù)對象，那么就會(huì)拋出錯(cuò)誤警告。

if (!ob) 為真說明當(dāng)前的target對象不是響應(yīng)式對象，那么直接賦值返回即可。

接著向下看：

defineReactive(ob.value, key, val)
 ob.dep.notify()
 return val

這里其實(shí)才是vue.set()真正處理對象的地方。 defineReactive(ob.value, key, val) 的意思是給新加的屬性添加依賴，以后再直接修改這個(gè)新的屬性的時(shí)候就會(huì)觸發(fā)頁面渲染。

ob.dep.notify() 這句代碼的意思是觸發(fā)當(dāng)前的依賴（這里的依賴依然可以理解成渲染函數(shù)），所以頁面就會(huì)進(jìn)行重新渲染。

總結(jié)

從源碼層次看vue提供的vue.set()和this.$set()這兩個(gè)api還是很簡單的，由于本文沒有詳細(xì)解釋vue依賴收集和觸發(fā)，所以有的地方說的還是很模糊。

以上所述是小編給大家介紹的vue源碼解析Vue.set()和this.$set()，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持！