JIYIK CN >

In Vue, when we need to dynamically add or modify an item in an object or array, we usually use the Vue.setor this.$setmethod. Although these two methods have the same function, their usage and internal implementation are different.

View.set

Vue.setIt is a global method provided by Vue.js and can be used anywhere. It is used as follows:

Vue.set(target, key, value)

Among them, target represents the object or array to be added or modified, key represents the attribute name or index value to be added or modified, and value represents the attribute value to be added or modified.

For example, we have a data object:

data: {
  list: ['a', 'b', 'c']
}

If we want to listchange the first element of the array to 'd', we can use Vue.setthe method:

Vue.set(this.data.list, 0, 'd')

This will change the first element of the list array to 'd'.

It is important to note that Vue.setmethods can only be used on objects or arrays, not on basic data types (such as strings, numbers, Boolean values, etc.).

this.$set

this.$setIt is a method provided by the Vue instance and can only be used in the Vue instance. It is used as follows:

this.$set(target, key, value)

The meanings of target and key Vue.setare the same as those of the method, and value indicates the attribute value to be added or modified.

For example, we have a component:

export default {
  data() {
    return {
      list: ['a', 'b', 'c']
    }
  },
  methods: {
    changeList() {
      this.$set(this.list, 0, 'd')
    }
  }
}

If we want to listchange the first element of the array to 'd', we can use this.$setthe method.

It is important to note that this.$setmethods can only be used on objects or arrays, not on basic data types (such as strings, numbers, Boolean values, etc.).

The difference between Vue.set and this.$set

Vue.setand this.$sethave the same function, both can be used to dynamically add or modify an item in an object or array. However, their usage and internal implementation are different.

1. Usage

Vue.setIt is a global method that can be used anywhere; this.$setit is a method provided by the Vue instance and can only be used in the Vue instance.

2. Internal Implementation

Vue.setthis.$setThe internal implementation of and is slightly different. Vue.setThe method is implemented as follows:

Vue.set = function(obj, key, val) {
  if (Array.isArray(obj) && isValidArrayIndex(key)) {
    obj.length = Math.max(obj.length, key)
    obj.splice(key, 1, val)
    return val
  }
  if (hasOwn(obj, key)) {
    obj[key] = val
    return val
  }
  const ob = obj.__ob__
  if (!ob) {
    obj[key] = val
    return val
  }
  defineReactive(ob.value, key, val)
  ob.dep.notify()
  return val
}

this.$setThe implementation of the method is as follows :

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

As you can see, this.$setthe method has some more boundary checks and warning prompts in its implementation to increase the robustness and readability of the code.

Precautions

When using the Vue.setor this.$setmethod, please note the following points:

1. Can only be used for objects or arrays, not for basic data types (such as strings, numbers, Boolean values, etc.).
2. When modifying an item in an array, you need to ensure that the index value is within the legal range, otherwise an exception will be thrown.
3. When using the this.$set method, you need to ensure that the method is used in the Vue instance, otherwise an exception will be thrown.
4. When using the Vue.set or this.$set method, you need to make sure that the target object has been observed by the Vue instance, otherwise responsive updates cannot be achieved. If the target object is not observed, you can use the Vue.observable method to convert it to a responsive object.
5. When using Vue.set or this.$set methods, you need to pay attention to performance issues. Since these two methods trigger Vue's responsive update mechanism, frequent modifications to objects or arrays may cause performance bottlenecks. To avoid this, you can try to use batch updates or asynchronous updates, or use native JavaScript methods to make modifications when responsive updates are not required.

Summarize

Vue.setand this.$setare methods used in Vue to dynamically add or modify an item in an object or array. They have the same function, but are used and implemented differently. When using these two methods, you need to pay attention to the target object being observed by the Vue instance, do not use them on basic data types, modify the index of the array to ensure that it is within the legal range, and pay attention to performance issues. Only by using these two methods correctly can you give full play to the advantages of Vue's responsive update mechanism and improve development efficiency and code quality.