vue.set()用法

作者：血之メ狂霸发布日期:2025-07-24 浏览:62

// 使用 Vue.set() 添加一个属性到响应式对象中

// 创建一个 Vue 实例
new Vue({
  el: '#app',
  data: {
    user: {
      name: 'John'
    }
  },
  methods: {
    addUserAge: function () {
      // 使用 Vue.set() 添加一个新的响应式属性
      this.$set(this.user, 'age', 30);
      // 或者使用 Vue.set 的全局方法
      // Vue.set(this.user, 'age', 30);
    }
  }
});

// HTML 部分
<div id="app">
  <p>{{ user.name }}</p>
  <p v-if="user.age">{{ user.age }}</p>
  <button @click="addUserAge">Add Age</button>
</div>

解释说明：

Vue.set()：用于向响应式对象中添加新的属性，并确保这个新属性也是响应式的。直接在已有对象上添加新属性不会触发视图更新，而 Vue.set() 可以确保新属性是响应式的。
this.$set()：这是 Vue.set() 的实例方法版本，可以直接在 Vue 实例的方法中使用。
示例功能：点击按钮后，会向 user 对象中添加 age 属性，并且视图会自动更新显示用户的年龄。

上一篇：vue extend

下一篇：vue3 template