别再用obj.prop = value了，快来学会这些神奇的方法，让Vue.js响应式更新你的对象属性！

向右看齐 2023-09-24 22:03 3阅读 0赞

Vue.js在监听一个对象的属性变化时，会通过其Setter方法进行响应式更新。但是，当一个对象被创建后，Vue.js无法动态追踪到对象属性的添加和删除，因此，直接通过**obj.prop = value**的方式给对象添加或修改属性时，这些属性不会触发视图的重新渲染。因此，需要使用一些特定的方法来修改对象属性，以确保Vue.js能够响应式地更新视图。

下面介绍使用`$set`和`Object.assign`方法来更新对象的方式：

### 1. 使用`$set`方法来更新对象 ###

在Vue.js中，可以使用`$set`方法来为对象设置一个新的属性，例如：

this.$set(this.obj, 'prop', value)
    复制代码

其中，`this.obj`表示要更新的对象，`prop`表示属性名，`value`表示属性值。

使用`$set`方法的好处是，它可以确保添加的属性是响应式的，可以触发视图的重新渲染。同时，由于`$set`方法的参数是动态的，因此可以在运行时添加新的属性。

### 2. 使用`Object.assign`方法来更新对象 ###

`Object.assign`方法用于将多个对象的属性合并到一个对象中，可以使用该方法来更新对象，例如：

this.obj = Object.assign({}, this.obj, { prop: value })
    复制代码

其中，`this.obj`表示要更新的对象，`{ prop: value }`表示要新增或修改的属性。

使用`Object.assign`方法的好处是，它可以一次性修改多个属性，并且可以使用ES6的扩展运算符（...）来快速添加多个属性。

需要注意的是，这两种方法都是通过创建一个新的对象来更新对象的属性，而不是直接修改原始对象的属性，因此需要重新给对象赋值。如果直接使用赋值运算符`=`来更新对象的属性，可能会导致该属性的值不是响应式的，从而无法触发视图更新。因此，尽量避免直接修改对象的属性，使用`$set`或者`Object.assign`方法来更新对象，可以保证对象的响应式更新。

### 3. 开始封装 ###

为了方便使用，可以将这些方法封装成一个通用的工具方法，可以用来更新任意对象的属性，以确保在给对象添加或修改属性时，能够确保Vue.js能够响应式地更新视图。

这个方法接收三个参数，`obj`表示要更新的对象，`property`表示要修改或添加的属性名或数组索引，`value`表示要修改或添加的属性值。

在方法内部，首先判断传入的`obj`是否为对象，如果不是，则直接返回。如果是数组并且传入的`property`是数字，说明要修改数组元素，使用`splice`方法来进行修改。如果不是数组或者传入的`property`不是数字，说明要修改对象属性，使用`$set`方法来进行修改。

使用这个方法时，可以这样调用：

updateObject(this.obj, 'prop', value);
    复制代码

或者

updateObject(this.arr, 0, value);
    复制代码

其中，`this.obj`表示要更新的对象，`'prop'`表示要修改或添加的属性名，`this.arr`表示要更新的数组，`0`表示要修改的元素的索引，`value`表示要修改或添加的属性值。

使用这个方法，可以确保对任意对象或数组进行添加或修改属性时能够响应式更新，不需要针对不同类型的数据使用不同的方法。需要注意的是，在对数组进行添加或删除元素时，仍然需要使用`Vue.set`或者`splice`方法来确保数组的响应式更新。

### 4. 将方法定义为全局方法 ###

如果想在整个Vue项目中快速调用这个方法，可以将其定义为全局方法。在Vue.js中，可以使用`Vue.prototype`属性来定义全局方法或属性。这样，就可以在所有的Vue实例中访问这个方法或属性。

下面是将`updateObject`方法定义为全局方法的示例代码：

import Vue from 'vue';
    
    Vue.prototype.$updateObject = function(obj, property, value) {
      if (!obj || typeof obj !== 'object') {
        return;
      }
      
      if (Array.isArray(obj) && typeof property === 'number') {
        obj.splice(property, 1, value);
      } else {
        this.$set(obj, property, value);
      }
    };
    复制代码

在这段代码中，使用`Vue.prototype`来定义一个名为`$updateObject`的全局方法，该方法与之前定义的`updateObject`方法相同。这样，就可以在Vue组件中使用`$updateObject`方法来更新对象的属性。

例如，在组件的方法中可以这样调用：

this.$updateObject(this.obj, 'prop', value);
    复制代码

或者

this.$updateObject(this.arr, 0, value);
    复制代码

其中，`this.$updateObject`表示全局方法，`this.obj`表示要更新的对象，`'prop'`表示要修改或添加的属性名，`this.arr`表示要更新的数组，`0`表示要修改的元素的索引，`value`表示要修改或添加的属性值。

使用这种方式，可以在整个Vue项目中快速调用`updateObject`方法，而无需在每个组件中单独引入或定义这个方法。需要注意的是，全局方法应该在项目的入口文件中定义，以确保在所有组件中都可以访问到。

### 5. 再度抽离，方便维护 ###

除了将方法定义为全局方法，还可以将其定义为Vue.js插件，以便在需要的时候进行注册和使用。

在Vue.js中，可以通过编写一个Vue插件来扩展Vue.js的功能。一个Vue插件就是一个包含`install`方法的对象。在`install`方法中，可以添加全局组件、指令、过滤器、方法等。通过将一个插件安装到Vue.js实例中，就可以在整个项目中使用该插件提供的功能。

下面是将`updateObject`方法定义为Vue插件的示例代码：

在这段代码中，定义了一个名为`updateObjectPlugin`的对象，该对象包含一个`install`方法。在`install`方法中，使用`Vue.prototype`来定义一个名为`$updateObject`的全局方法，该方法与之前定义的`updateObject`方法相同。

在Vue.js中注册插件的方式有两种。一种是在创建Vue实例时通过`plugins`选项来注册插件，例如：

import Vue from 'vue';
    import updateObjectPlugin from './updateObjectPlugin.js';
    
    const app = new Vue({
      el: '#app',
      plugins: [updateObjectPlugin],
    });
    复制代码

在这个例子中，将`updateObjectPlugin`插件注册到Vue.js实例中，以便在整个项目中使用`$updateObject`方法。

另一种注册插件的方式是在Vue.js实例中通过`Vue.use`方法来注册插件，例如：

import Vue from 'vue';
    import updateObjectPlugin from './updateObjectPlugin.js';
    
    Vue.use(updateObjectPlugin);
    复制代码

在这个例子中，通过`Vue.use`方法将`updateObjectPlugin`插件注册到Vue.js实例中。

使用这种方式，可以将`updateObject`方法定义为Vue插件，并在需要的时候进行注册和使用，以扩展Vue.js的功能。需要注意的是，在使用插件的时候，应该确保插件在需要使用其功能的组件之前进行注册。

### 6. 总结 ###

综上所述，使用`$set`和`Object.assign`方法来更新对象属性可以确保Vue.js能够响应式地更新视图，使用`updateObject`方法可以快速更新任意对象的属性并确保响应式更新，将其定义为全局方法或Vue插件可以在整个项目中快速调用。