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

前言

惠州網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司,惠州網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為惠州成百上千家提供企業(yè)網(wǎng)站建設(shè)服務。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢，請找那個售后服務好的惠州做網(wǎng)站的公司定做！

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

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

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

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

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

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

所以按照官網(wǎ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()實現(xiàn)原理

是時候看一波這兩個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()這兩個api的實現(xiàn)原理基本一模一樣，都是使用了set函數(shù)。set函數(shù)是從 ../observer/index 文件中導出的，區(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ù)接收三個參數(shù)分別為 target、key、val，其中target的值為數(shù)組或者對象，這正好和官網(wǎng)給出的調(diào)用Vue.set()方法時傳入的參數(shù)參數(shù)對應上。如下圖所示：

我們接著往下看：

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中的一種。所以這里的意思是如果當前環(huán)境不是生產(chǎn)環(huán)境并且 isUndef(target) || isPrimitive(target) 為真的時候，那么就拋出錯誤警告。

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

接著向下看：

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

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

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

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

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

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

首先if判斷當前target是不是數(shù)組，并且key的值是有效的數(shù)組索引。然后將target數(shù)組的長度設(shè)置為target.length和key中的最大值，這里為什么要這樣做呢?是因為我們可能會進行下面這種騷操作：

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

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

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

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

我們接著向下看代碼：

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

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

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

我們接著向下看代碼：

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__ ，這個 __ob__ 屬性到底是什么對象呢？vue給響應式對象都加了一個 __ob__ 屬性，如果一個對象有這個 __ob__ 屬性，那么就說明這個對象是響應式對象，我們修改對象已有屬性的時候就會觸發(fā)頁面渲染。

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

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

接著向下看：

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

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

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

總結(jié)

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

以上所述是小編給大家介紹的vue源碼解析Vue.set()和this.$set()，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！

網(wǎng)站名稱：從vue源碼解析Vue.set()和this.$set()
文章網(wǎng)址：http://www.muchs.cn/article30/gehiso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、面包屑導航、電子商務、企業(yè)網(wǎng)站制作、網(wǎng)站策劃、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)