快捷導(dǎo)航

你知道Vue中神奇的$set是如何實(shí)現(xiàn)的嗎?

更新時(shí)間：2022年12月13日 15:43:13 作者：清風(fēng)丶

在日常開(kāi)發(fā)中，$set的也是一個(gè)非常實(shí)用的API。但是我們知其然更要知其所以然，接下來(lái)就跟隨小編一起看一下Vue中的$set是如何實(shí)現(xiàn)的吧

前言

在日常開(kāi)發(fā)中，$set的也是一個(gè)非常實(shí)用的API,因?yàn)閂ue2實(shí)現(xiàn)響應(yīng)式的核心是利用了ES5的Object.defineProperty，當(dāng)我們通過(guò)直接修改數(shù)組下標(biāo)更改數(shù)組或者給對(duì)象添加新的屬性，這個(gè)時(shí)候Object.defineproperty是監(jiān)聽(tīng)不到數(shù)據(jù)的變化的，這時(shí)候大家就會(huì)用上$set，讓修改的操作也實(shí)現(xiàn)響應(yīng)，我們知其然更要知其所以然，接下來(lái)看一下Vue中的$set是如何實(shí)現(xiàn)的

應(yīng)用場(chǎng)景

 let dataArr = ["item1"];
 let dataObject = {
      name: "ccs"
    };

    dataArr[2] = "item2";
    dataObject.age = 22;
//    響應(yīng)失敗，頁(yè)面沒(méi)有顯示更新新增的數(shù)據(jù)

    this.$set(this.dataArr,2,'item2')
    this.$set(this.dataObject,'age',22)
//響應(yīng)成功，頁(yè)面顯示更新新增的數(shù)據(jù)

set實(shí)現(xiàn)

接下來(lái)我們看一下$set在Vue中的定義

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;
}

在源碼中首先判斷set的目標(biāo)是否是undefined和基本類(lèi)型如果是undefined或基本類(lèi)型就報(bào)錯(cuò)，因?yàn)橛脩舨粦?yīng)該往undefined和基本類(lèi)型中set東西，然后又判斷了目標(biāo)是否是數(shù)組與key是不是合法的index,合法的index是指值為大于等于0的整數(shù)，如果兩個(gè)條件都成立就對(duì)目標(biāo)數(shù)組調(diào)用splice方法插入或者修改數(shù)組，這里的splice不是普通的splice，是王維詩(shī)里的splice，是被vue代理重寫(xiě)過(guò)的splice

數(shù)組實(shí)現(xiàn)響應(yīng)

$set實(shí)現(xiàn)數(shù)組修改響應(yīng)的方式是代理重寫(xiě)的數(shù)組的一部分方法，接下來(lái)我們看一下具體實(shí)現(xiàn)

const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)

const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]
function def(obj, key, val, enumerable) {
    Object.defineProperty(obj, key, {
        value: val,
        enumerable: !!enumerable,
        writable: true,
        configurable: true
    });
}
methodsToPatch.forEach(function (method) {
  const original = arrayProto[method]
  def(arrayMethods, method, function mutator (...args) {
    const result = original.apply(this, args)
    const ob = this.__ob__
    let inserted
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args
        break
      case 'splice':
        inserted = args.slice(2)
        break
    }
    if (inserted) ob.observeArray(inserted)
    ob.dep.notify()
    return result
  })
})

vue中代理重寫(xiě)的不只是splice，有push、pop、shift、unshift、splice、sort、reverse這七個(gè)方法, 首先執(zhí)行了const result = original.apply(this, args)執(zhí)行原本數(shù)組的方法并獲取它的值，接下來(lái)判斷如果是往數(shù)組中添加值就將新添加的值也實(shí)現(xiàn)響應(yīng)式,最后一步拿到這個(gè)數(shù)組的_ob_對(duì)象對(duì)_ob_里的dep進(jìn)行派發(fā)更新。

想深入了解vue的響應(yīng)式可以查閱往期文章面試官問(wèn)你Vue2的響應(yīng)式原理，你怎么答？

對(duì)象實(shí)現(xiàn)響應(yīng)

$set中下半部分的邏輯就是用來(lái)處理對(duì)象響應(yīng)的，我們接著往下看

  if (key in target && !(key in Object.prototype)) {
    target[key] = val;
    return val;
  }
  const ob = (target: any).__ob__;
  if (!ob) {
    target[key] = val;
    return val;
  }
  defineReactive(ob.value, key, val);
  ob.dep.notify();
  return val;

首先判斷了屬性如果在目標(biāo)對(duì)象中直接return結(jié)束邏輯，因?yàn)関ue只有添加目標(biāo)對(duì)象中原本沒(méi)有的屬性時(shí)才會(huì)失去響應(yīng)

例如 let obj={} obj.name='ccs'，

vue在初始化的時(shí)候會(huì)將data里的所有屬性都變成響應(yīng)式，如果的值是對(duì)象或者數(shù)組則會(huì)new一個(gè)Observer實(shí)例儲(chǔ)存在__ob__，想深入了解vue的響應(yīng)式可以查閱往期文章面試官問(wèn)你Vue2的響應(yīng)式原理，你怎么答

拿到這個(gè)對(duì)象的_ob_進(jìn)行判斷，如果不存在就說(shuō)明是未經(jīng)過(guò)vue初始化的普通對(duì)象而不是響應(yīng)式對(duì)象 否則就手動(dòng)通過(guò)defineReactive為屬性添加get方法與set方法實(shí)現(xiàn)響應(yīng)，然后手動(dòng)調(diào)用dep里的notify()發(fā)布更新。