vue中 this.$set的用法详解

当我们在Vue中对数据进行修改时，通常需要使用Vue提供的响应式API对数据进行处理，例如使用Vue.set或this.$set方法。其中，this.$set方法可以让我们在Vue实例上添加一个响应式的属性，同时触发视图的重新渲染。下面我们来详细讲解Vue中this.$set的用法。

如何使用this.$set方法？

this.$set方法的使用方法非常简单，通常我们需要指定两个参数，第一个参数是修改的数据对象，并且该对象必须是响应式的，第二个参数是要修改的属性名。

//使用this.$set方法向vue实例动态添加一个属性
this.$set(this.$data, 'example', 'hello world');

示例1：使用this.$set将对象属性设为响应式

在Vue中，可以使用computed选项来创建一个计算属性，其中定义的计算属性都是响应式的。不过有时候我们需要在Vue实例中动态的添加一个属性，并且让该属性也能够响应式的更新到视图中，这时候就可以使用this.$set方法。

下面给出一个实例，例如我们想动态的添加一个name属性给Vue实例，并让它成为一个响应式的属性，我们可以使用下面的代码：

new Vue ({
    el: '#app',
    data: {
        message: 'Hello Vue.js',
    },
    methods: {
        updateName: function () {
            this.$set(this.$data, 'name', 'Lucy');
        }
    }
})

在上面的代码中，我们在Vue实例中添加了一个名为updateName的方法，该方法会动态的调用this.$set方法来添加一个响应式的name属性。

示例2：使用this.$set更新数组项

在Vue中，使用this.$set方法可以处理数组中新增或删除的数据，同时触发视图的重新渲染。例如，我们要在Vue组件的data中初始包含一组数据列表：

data () {
  return {
    list: [
      {name: '张三', age: 22},
      {name: '李四', age: 25},
      {name: '王五', age: 28}
    ]
  }
}

如果我们用list[1]={name:'Dick',age:30}的方式更新数组项，则不会触发视图重新渲染。这时候，我们可以使用Vue提供的this.$set方法。

this.$set(this.list, 1, {name: 'Dick', age: 30});

上述代码中，第一个参数表示要修改的数组，第二个参数表示要修改的数组索引，第三个参数表示要修改的新值。这样，我们就可以很方便地使用this.$set更新数组项，并且触发视图的重新渲染。

总结

本文主要讲解了Vue中this.$set的用法，它可以让我们动态的向Vue实例中添加响应式的数据属性，同时也能很方便的处理数组中新增或删除的数据。