Let’s talk about how $set is implemented in Vue?

In daily development, $set is also a very practical API, because the core of Vue2's responsiveness is to use ES5's Object.defineProperty, when we change the array or add new properties to the object by directly modifying the array subscript, Object.defineproperty cannot monitor the changes in the data. At this time, everyone will use $set allows the modified operation to also respond. We know it but also why. Next, let’s take a look at how $set in Vue is implemented. [Related recommendations: vuejs video tutorial, web front-end development]

Application scenario

 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 implementation

Next, let’s take a look at the definition of $set in 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;
}

In the source code, first determine whether the target of set is undefined and basic typeif it is If undefined or basic type reports an error,
because the user should not set things to undefined and basic types,
then determines whether the target is an array or not. Is the key a legal index? A legal index refers to an integer with a value greater than or equal to 0.
If both conditions are true, call the splice method on the target array to insert or modify the array ,
The splice here is not the ordinary splice, is the splice in Wang Wei’s poem, which is the splice

that has been rewritten by the vue proxy.

Array implementation response

$set implements array modification response as part of the array method rewritten by the agent. Next, let’s take a look at the specific implementation

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

The agent in vue rewrites not only splice, but also has seven methods: push, pop, shift, unshift, splice, sort, reverse. First, const result = original.apply(this, args)executes the method of the original array and obtains its value, and then determines whether to add a value to the array The newly added value will also be implemented Responsiveness,
The last stepGet the _ob_object of this array Pair _ob_ The dep in is distributed and updated.
If you want to learn more about vue's responsiveness, you can check out previous articles
The interviewer asked you about the responsiveness principle of Vue2. How did you answer? - Nuggets (juejin.cn)

Object implementation response

$setThe logic in the lower half is used to process the object response , let’s look down.

  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;

Firstly, we judged the properties. If we directly return in the target object to end the logic,
because vue will only add properties that are not originally in the target object. Loss of response ,
For example, let obj={} obj.name='ccs',
vue will make all attributes in data responsive during initialization. If the value is an object or array, a new Observer instance will be stored in __ob__. If you want to learn more about vue’s responsiveness, you can check out previous articles
Interviewer I asked you about the responsiveness principle of Vue2. How would you answer? - Nuggets (juejin.cn)
Get the _ob_ of this object for judgment. If it does not exist, it means that it is a ordinary object that has not been initialized by vue instead of a response Formula object Otherwise, manually add the get method and set method to the attribute through defineReactive to implement the response,
then manually call ## in dep #notify()Publish updates.

Summary

The $set method in vue handles arrays and objects essentially the same way. It adds a response to the new value and then manually triggers the dispatch update.

(Learning video sharing:

vuejs introductory tutorial, Basic programming video)

The above is the detailed content of Let’s talk about how $set is implemented in Vue?. For more information, please follow other related articles on the PHP Chinese website!