Vue.set()和this.$set()使用和区别

Vue.js是一款流行的JavaScript框架，提供了许多便利的方法来管理及操作我们的应用程序。其中Vue.set()和this.$set()方法是非常重要的，可以在Vue.js中非常方便地实现响应式数据的创建和更新。

Vue.set()与this.$set()的使用

Vue.set()

Vue.set()是Vue.js中的全局函数，可以通过在组件实例中使用来更新侦听到的响应式数据。参数是三个，第一个是用于更新的对象，第二个是要更新的属性字段，第三个是更新的值。

// 以动态数组长度变化为例
data() {
  return {
    items: [1, 2, 3, 4]
  }
},
method() {
  // Vue.set
  Vue.set(this.items, 4, 5)
}

在上述代码中，我们可以看到传递给Vue.set()的第一个参数是该数组本身，第二个参数是要更新的属性下标，第三个参数是要更新的值。这将返回一个新的具有更新值的新数组。使用Vue.set()只是为了确保数据被Vue实例正确跟踪。

this.$set()

this.$set()是Vue.js实例中的方法，与Vue.set()类似，不同的是第一个参数是Vue实例的数据对象。这意味着可以省略第一个参数，使语法更加简洁。

// 以动态数组长度变化为例
data() {
  return {
    items: [1, 2, 3, 4]
  }
},
method() {
  // this.$set
  this.$set(this.items, 4, 5)
}

在上述代码中，我们看到this.$set()方法将视觉上简化了语句。程序员只需指定第一个参数是包含要更新值的对象，第二个参数是要更新的属性下标，第三个参数是新值。在不同的组件和实例中，可以使用不同的this.$set()方法来更新响应式数据。对当前实例的数据进行更新，而不是全局的数据，因此实例的私有属性仍然是单一的。

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

Vue.set()和this.$set()之间的主要区别是第一个参数。Vue.set()可以在任何范围内使用：全局、局部或组件实例。第一个参数必须是要更新的数据，而在this.$set()方法中，则是需要通过Vue实例方法调用的组件实例。

另一方面，this.$set()方法是Vue.js实例中的专用方法，只能在Vue组件实例中使用。在代码中，this.$set()方法更清晰地表示了更新是在特定Vue实例的数据对象而不是全局数据对象上进行的。

因此，在大多数情况下，最好使用this.$set()代替Vue.set()，因为它具有更具体的语义和良好的代码风格。

Vue.set()与this.$set()使用示例

Vue.set()使用示例

<template>
  <div>
    <h2>Todos</h2>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
    <button @click="addItem">Add Item</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Buy groceries', 'Clean the house', 'Wash the car']
    }
  },
  methods: {
    addItem() {
      Vue.set(this.items, this.items.length, 'New item')
    }
  }
}
</script>

在上述代码中，当用户单击“添加项目”按钮时，我们将使用Vue.set()添加一个新的“新项目”项。Vue.set()方法将使用数组本身作为第一个参数，需要更新的属性下标作为第二个参数，需要更新的新值作为第三个参数。

this.$set()示例

<template>
  <div>
    <h2>{{ fullName }}</h2>
    <button @click="changeLastName">Change Last Name</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`
    }
  },
  methods: {
    changeLastName() {
      this.$set(this, 'lastName', 'Smith')
    }
  }
}
</script>

在上述代码中，当用户单击“更改姓氏”按钮时，我们将调用this.$set()方法并将Vue实例作为第一个参数。在此示例中，第一个参数是Vue实例本身，而不是数据对象。第二个参数是要更新的属性名称，而第三个参数是新值。这有效地改变了Vue实例中的姓氏属性变量。