Parlons de la façon dont $set est implémenté dans Vue ?

Dans le développement quotidien, $set est également une API très pratique, car le cœur de la réactivité de Vue2 est d'utiliser le Object.defineProperty d'ES5 lorsque nous modifions le. tableau ou ajoutez de nouvelles propriétés à l'objet en modifiant directement l'indice du tableau, Object.defineproperty ne peut pas surveiller les modifications des données. À ce stade, tout le monde utilisera $set, de sorte que l'opération modifiée implémente également la réponse. Nous le savons, mais aussi pourquoi. Voyons ensuite comment $set dans Vue est implémenté. [Recommandations associées : tutoriel vidéo vuejs$set的也是一个非常实用的API,因为Vue2实现响应式的核心是利用了ES5的Object.defineProperty，当我们通过直接修改数组下标更改数组或者给对象添加新的属性，这个时候Object.defineproperty是监听不到数据的变化的，这时候大家就会用上$set，让修改的操作也实现响应，我们知其然更要知其所以然，接下来看一下Vue中的$set是如何实现的。【相关推荐：vuejs视频教程、web前端开发】

应用场景

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

    dataArr[2] = "item2";
    dataObject.age = 22;
    响应失败，页面没有显示更新新增的数据

    this.$set(this.dataArr,2,'item2')
    this.$set(this.dataObject,'age',22)
    响应成功，页面显示更新新增的数据

set实现

接下来我们看一下$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的目标是否是undefined和基本类型如果是undefined或基本类型就报错，
因为用户不应该往undefined和基本类型中set东西，
然后又判断了目标是否是数组与key是不是合法的index,合法的index是指值为大于等于0的整数，
如果两个条件都成立就对目标数组调用splice方法插入或者修改数组，
这里的splice不是普通的splice，是王维诗里的splice，是被vue代理重写过的splice

数组实现响应

$set实现数组修改响应的方式是代理重写的数组的一部分方法，接下来我们看一下具体实现

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中代理重写的不只是splice，有push、pop、shift、unshift、splice、sort、reverse这七个方法, 首先执行了const result = original.apply(this, args)执行原本数组的方法并获取它的值，接下来判断如果是往数组中添加值就将新添加的值也实现响应式,
最后一步拿到这个数组的_ob_对象对_ob_里的dep进行派发更新。
想深入了解vue的响应式可以查阅往期文章
面试官问你Vue2的响应式原理，你怎么答？ - 掘金 (juejin.cn)

对象实现响应

$set中下半部分的逻辑就是用来处理对象响应的，我们接着往下看

  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;

首先判断了属性如果在目标对象中直接return结束逻辑，
因为vue只有添加目标对象中原本没有的属性时才会失去响应，
例如 let obj={}  obj.name='ccs'，
vue在初始化的时候会将data里的所有属性都变成响应式，如果的值是对象或者数组则会new一个Observer实例储存在__ob__，想深入了解vue的响应式可以查阅往期文章
面试官问你Vue2的响应式原理，你怎么答？ - 掘金 (juejin.cn)
拿到这个对象的_ob_进行判断，如果不存在就说明是未经过vue初始化的普通对象而不是响应式对象否则就手动通过defineReactive为属性添加get方法与set方法实现响应，
然后手动调用dep里的notify(), Développement web front-end

]

Scénarios d'application

rrreee

implémentation de set

Jetons ensuite un coup d'œil à la définition de $set dans Vue

rrreeeDans le code source, déterminez d'abord si la cible de set est non défini et Type de base S'il s'agit de non défini ou de Type de base, une erreur sera signalée,
car l'utilisateur ne doit pas définir de types indéfinis et basiques.,
Ensuite, il est jugé si la cible est un tableau et si la clé est un index légal. Un index légal fait référence à un entier avec une valeur. supérieur ou égal à 0.
Si les deux conditions sont vraies, Appelez la méthode splice sur le tableau cible pour insérer ou modifier le tableau,
le splice code> ici n'est pas une <code>épissure ordinaire, est une épissure dans le poème de Wang Wei, qui est une épissure strong> qui a été réécrit par vue proxy

implémentation du tableau Réponse La façon dont $set implémente le tableau pour modifier la réponse fait partie du tableau méthode réécrite par le proxy. Ensuite, jetons un coup d'œil à l'implémentation spécifiquerrreee🎜vue. La réécriture du proxy n'est pas seulement splice , il existe sept méthodes : push, pop, shift. , décaler, épisser, trier, inverser. Tout d'abord, const result = original.apply(this, args)exécute la méthode du tableau d'origine et obtient sa valeur, puis détermine si elle est ajoutée au tableau L'ajout d'une valeur réalise la réactivité de la valeur nouvellement ajoutée
La dernière étape obtient l'_ob_ object de celle-ci. array.code>Distribuez et mettez à jour le dépôt dans <code>_ob_.
Si vous souhaitez en savoir plus sur la réactivité de Vue, vous pouvez consulter les articles précédents
L'intervieweur vous a interrogé sur le principe de réactivité de Vue2. Comment avez-vous répondu ? - Nuggets (juejin.cn) 🎜🎜

Réponse d'implémentation d'objet 🎜🎜$set La logique dans la moitié inférieure est utilisée pour traiter les objets Responsive , continuons à regarder vers le bas.🎜rrreee🎜Tout d'abord, nous jugeons si l'attribut est renvoyé directement dans l'objet cible pour mettre fin à la logique,
Parce que Vue n'ajoutera que des attributs qui ne sont pas à l'origine dans l'objet cible. Perte de réponse,
Par exemple, laissez obj={} obj.name='ccs',
vue modifiera tous les attributs dans données lors de l'initialisation Devenez réactif. Si la valeur est un objet ou un tableau, une nouvelle instance de Observer sera stockée dans __ob__ Si vous souhaitez en savoir plus sur la réactivité de vue, vous pouvez consulter la précédente. articles
L'intervieweur vous a interrogé sur Vue2. Comment répondez-vous au principe de réactivité ? - Nuggets (juejin.cn)🎜
Récupérez le _ob_ de cet objet pour jugement. S'il n'existe pas, cela signifie qu'il s'agit d'un objet ordinaire qui n'a pas été initialisé par vue et n'est pas un objet<.> Sinon, ajoutez manuellement la méthode get et la méthode set à l'attribut via defineReactive pour implémenter la réponse,
puis appelez manuellement dep <code>notify() publie les mises à jour. 🎜🎜Résumé🎜🎜La méthode $set dans vue gère les tableaux et les objets essentiellement de la même manière. Elle ajoute une réponse à la nouvelle valeur, puis déclenche manuellement la mise à jour de répartition. 🎜🎜 (Partage de vidéos d'apprentissage : 🎜Tutoriel d'introduction à vuejs🎜, 🎜Vidéo de programmation de base🎜)🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!