vue $set

作者：惨美歌发布日期:2025-12-22 浏览:53

// 使用 Vue 的 $set 方法来响应式地更新嵌套对象的属性

// 假设我们有一个 Vue 实例
new Vue({
  el: '#app',
  data: {
    user: {
      name: 'John',
      age: 30
    }
  },
  methods: {
    updateAge() {
      // 直接修改 this.user.age 不会触发视图更新
      // this.user.age = 31; // 不推荐

      // 使用 $set 方法来确保视图更新
      this.$set(this.user, 'age', 31); // 推荐
    }
  }
});

// 解释：
// 当直接修改对象的属性时，Vue 无法检测到变化，因此不会触发视图更新。
// 使用 Vue 提供的 $set 方法可以确保属性的变化被检测到，并且视图会相应地更新。
// $set 的第一个参数是要修改的对象，第二个参数是属性名，第三个参数是新的值。

上一篇：vue store

下一篇：vue filter