this.$set是Vue.js中用于响应式地设置对象属性的方法。它的正确使用可以确保当你改变对象属性时，Vue能够正确地观察到这个变化并进行响应式更新。以下是 this.$set的正确使用教程：

蓝易云服务器 - this.$set的正确使用教程_赋值

使用场景：
在Vue.js中，当你想要添加新的属性到一个已经创建的对象上，或者你想要修改已经存在的对象属性时，直接赋值可能会导致Vue无法正确地观察到这个变化。这时，你应该使用 this.$set来确保这个变化能够被Vue正确地监听。

正确使用方法：

  1. 导入Vue.js：
    确保你已经正确导入Vue.js，这通常在你的项目中的入口文件中完成，如main.js。
  2. 创建Vue实例：
    创建Vue实例并定义data对象，其中包含需要被观察的对象或对象属性。
  3. 使用this.$set：
    当你需要添加新的属性或修改已存在的属性时，使用 this.$set方法。

示例：
假设我们有以下Vue组件：

<template>
  <div>
    <p>Username: {{ user.name }}</p>
    <p>Email: {{ user.email }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: "John Doe",
      },
    };
  },
  methods: {
    updateUser() {
      // 直接赋值可能导致响应式系统无法监听这个变化
      // this.user.email = "john.doe@example.com";

      // 使用this.$set确保响应式系统能够正确监听变化
      this.$set(this.user, "email", "john.doe@example.com");
    },
  },
};
</script>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.

在上述示例中，我们在 updateUser方法中使用了 this.$set来为 user对象添加了一个新的属性 email。这样，当我们调用 updateUser方法时，Vue将能够正确地更新DOM以反映出这个变化。