Vue.set方法的原理？

Vue 6月前 309

Vue.set 方法是 Vue.js 中用于设置对象属性的方法，在 Vue.js 内部使用，主要用于响应式数据的维护。本文将从响应式数据的原理以及 Vue.js 的响应式数据结构入手，详细解释 Vue.set 方法的原理，并从实例角度说明 Vue.set 方法的应用。

一、响应式数据的原理

Vue.js 在实现响应式数据的原理上，采用了数据劫持的方法。数据劫持的过程中，通过 Object.defineProperty 方法劫持了数据对象的属性，使得数据对象的属性在被获取或者修改时，既可以被返回或者修改数据，又可以进行响应式处理，即通过 setter 方法触发更新操作，更新组件视图。

因此，当我们对于普通的 JavaScript 对象进行赋值操作时，Vue.js 并不能监听到这一变化，即使是一个对象属性的修改操作，也需要我们手动进行监听和更新。

二、Vue.js 的响应式数据结构

Vue.js 在实现响应式数据的过程中，并不是将数据对象进行全部的监听，而是通过 Vue.observable 方法将传入的对象转换成了 Observable 对象，只有该 Observable 对象的属性才会被监听和更新。Vue.observable 方法有以下的特点：

它只能监听对象，不能监听数组。
它可以监听对象的属性的添加和删除操作，并且通过 Vue.set 和 Vue.delete 方法进行更新。
它可以监听对象属性的值的修改操作，但是不能监听数组元素的值修改操作。

需要注意的是，对于 Vue.js 的响应式数据结构无法监听到的操作，Vue.js 提供了一些 API 进行可视性地操作数据对象。

三、Vue.set 方法的原理

Vue.set 方法用来为已经存在的对象添加属性，并进行响应式处理。Vue.set 方法具有以下的特点：

它可以为对象添加新的属性，并进行响应式处理。
当我们向一个对象添加一个新的属性时，并不会通过 Vue.observable 手动实现响应式，而是通过 Vue.set 进行处理。
它可以监听添加属性的操作，进行响应式更新，从而更新组件视图。
它可以处理数组的索引和长度属性的变化，从而更新组件视图。

四、Vue.set 方法的举例说明

下面通过一个实例来说明 Vue.set 方法的应用。我们创建一个 data 对象，其中包含 name 和 age 两个属性，并将 data 对象传入 Vue.observable 方法中，然后我们通过在 methods 中添加一个方法通过 Vue.set 方法动态为 data 添加一个新的属性，如下所示：

<template>
  <div>
    <input type="text" v-model="name" />
    <button @click="add">添加属性{{index}}</button>
  </div>
</template>

<script>
import Vue from "vue";
export default {
  name: "VueSetDemo",
  data() {
    return {
      data: Vue.observable({
        name: "张三",
        age: 18,
      }),
      index: 0,
    };
  },
  methods: {
    add() {
      this.$set(this.data, "newProperty" + this.index, "this is new Property" + this.index);
      this.index++;
    },
  },
};
</script>