Vue.js中的this.$set方法

this.$set是Vue.js中一个重要的工具方法，它允许在Vue实例中动态地添加或修改对象的属性。在使用Vue.js时，我们通常会遇到这样的需求：需要根据某些条件来动态地添加或修改数据，而这些数据可能存在于嵌套的对象或数组中，我们不能直接把它们放在data属性里初始化。那么这个时候，this.$set就可以帮我们实现这个需求。

方法介绍

this.$set是Vue.js中的实例方法，其函数名为set。它有三个参数：object、key、value。其中，object表示要添加或修改属性的对象，key表示属性的名称，value表示属性的值。

this.$set(object, key, value)

示例

以下是一个使用this.$set方法的示例，我们来动态地添加或修改person对象的age属性：

var app = new Vue({
  el: '#app',
  data: {
    person: {
      name: '张三'
    }
  },
  methods: {
    updateAge: function(age) {
      this.$set(this.person, 'age', age)
    }
  }
})

在上述例子中，我们通过一个updateAge方法来添加或修改对象的age属性。当我们调用该方法并传入age参数时，this.$set方法就会将age赋值给person对象的age属性。

注意事项

• 在使用this.$set方法时，必须确保第一个参数是引用类型，比如对象和数组，否则该方法不会生效。

• 如果要添加或修改的属性不存在，this.$set方法会自动将该属性创建出来并赋初值为undefined。

总结

this.$set方法是Vue.js中一个非常实用的工具方法，它可以帮我们以简单、方便的方式实现修改对象属性的操作。在Vue.js开发中，我们经常需要动态地添加或修改数据，这时候就可以使用该方法来帮助我们完成这个任务。