Vue2中的Vue.set()和this.$set()：理解和使用指南

Vue.set() 与 this.$set()：理解和有效使用

在 Vue.js 中，管理响应式数据至关重要，而 Vue.set() 和 this.$set() 是两种关键的方法。理解它们的用途和区别对于高效地更新数据、提高代码可读性和可维护性至关重要。

Vue.set()：全局数据操作

Vue.set() 是一种全局方法，可以在任何地方使用，无论是否在 Vue 实例内。它允许你添加或更新 Vue 实例或组件对象中的响应式属性。语法如下：

Vue.set(object, key, value)

例如：

Vue.set(this, 'name', 'John Doe')

这将创建一个名为 "name" 的响应式属性并将其值设置为 "John Doe"。

this.$set()：实例内数据操作

this.$set() 是一个实例方法，仅限于当前 Vue 实例使用。它用于在组件内部添加或更新响应式属性。语法如下：

this.$set(key, value)

例如：

this.$set('name', 'John Doe')

这与 Vue.set() 类似，但只限于当前组件实例。

Vue.set() 与 this.$set() 的区别

两者的主要区别在于作用域：Vue.set() 是全局的，而 this.set() 仅限于实例。Vue.set() 适用于在 Vue 实例外更新数据，例如在父组件中更新子组件数据。this.set() 适用于在组件内部更新数据。

选择合适的方法

一般来说，在以下情况下使用 Vue.set()：

• 在 Vue 实例外更新数据
• 在父组件中更新子组件数据

在以下情况下使用 this.$set()：

• 在 Vue 实例内更新数据
• 在组件内部更新组件数据

注意事项

• Vue.set() 和 this.$set() 都只能更新现有的响应式数据。
• 它们都是同步操作，会立即触发视图更新。
• 确保更新的是响应式数据，以触发视图更新。

示例

考虑以下代码示例：

<div id="app">
  <p>{{ name }}</p>
</div>

const app = new Vue({
  data() {
    return {
      name: 'John Doe'
    }
  },
  methods: {
    updateName() {
      // 使用 Vue.set() 在父组件中更新子组件数据
      Vue.set(this.$refs.child, 'name', 'Jane Doe')
    }
  }
})

在这里，我们使用 Vue.set() 在父组件中更新子组件的 "name" 属性。

结论

熟练掌握 Vue.set() 和 this.$set()对于管理 Vue 中的响应式数据至关重要。了解它们的用途和区别可以帮助你编写高效且可维护的代码。

常见问题解答

1. Vue.set() 和 this.$set() 有什么区别？
   • Vue.set() 适用于在 Vue 实例外更新数据，而 this.$set() 仅限于实例内更新。
2. 什么时候使用 Vue.set()？
   • 在父组件中更新子组件数据或在 Vue 实例外更新数据时。
3. 什么时候使用 this.$set()？
   • 在组件内部更新组件数据时。
4. 更新非响应式数据时会发生什么？
   • 视图不会更新，因为 Vue.set() 和 this.$set() 只影响响应式数据。
5. 如何延迟更新数据后的操作？
   • 使用 Vue.nextTick() 方法。