详解Vue.set和this.$set在不同使用场景的妙用

Vue.set与this.$set的用法

Vue.set和this.$set都是用于修改响应式数据的方法，但它们的使用场景和语法略有不同。

Vue.set

Vue.set方法用于修改响应式对象的某个属性。它的语法如下：

Vue.set(object, key, value)

其中：

• object是要修改的响应式对象。
• key是要修改的属性的名称。
• value是要赋予给该属性的新值。

例如，以下代码使用Vue.set方法修改了名为user的响应式对象的name属性：

const user = {
  name: 'John Doe'
}

Vue.set(user, 'name', 'Jane Doe')

修改后，user对象的name属性的值将变成Jane Doe，并且视图也会随之更新。

this.$set

this.$set方法与Vue.set类似，但它只能用于修改当前组件的响应式数据。它的语法如下：

this.$set(key, value)

其中：

• key是要修改的属性的名称。
• value是要赋予给该属性的新值。

例如，以下代码使用this.$set方法修改了当前组件的user对象的name属性：

export default {
  data() {
    return {
      user: {
        name: 'John Doe'
      }
    }
  },
  methods: {
    changeName() {
      this.$set('user.name', 'Jane Doe')
    }
  }
}

修改后，当前组件的user对象的name属性的值将变成Jane Doe，并且视图也会随之更新。

Vue.set与this.$set的使用场景

Vue.set和this.set的使用场景略有不同。Vue.set通常用于在创建响应式对象时初始化数据，或在外部代码中修改响应式数据。而this.set通常用于在组件内部修改响应式数据。

Vue.set的使用场景

• 在创建响应式对象时初始化数据。
• 在外部代码中修改响应式数据。
• 当你需要修改一个对象的嵌套属性时，可以使用Vue.set方法。

this.$set的使用场景

• 在组件内部修改响应式数据。
• 当你需要修改一个对象的根属性时，可以使用this.$set方法。
• 当你需要修改一个数组时，可以使用this.$set方法。

总结

Vue.set和this.set都是Vue中用于修改响应式数据的重要方法。Vue.set用于修改响应式对象的某个属性，而this.set用于修改当前组件的响应式数据。它们的使用场景略有不同，但都是非常有用的工具。