vue.set()方法-CSDN博客

本文链接：https://blog.csdn.net/wwwyyygggddd/article/details/126463727

在Vue.js中，当向已经声明的对象或数组中添加新属性时，这些新增属性默认不会触发视图更新。为了解决这个问题，Vue提供了Vue.set()和vm.$set()方法，这两个方法会为对象添加getter和setter，从而实现响应式更新。通过调用这两个方法，可以确保向响应式对象添加新属性时，视图能够正确响应数据变化。例如，在一个用户对象中添加新的属性'sex'，并更新其值，视图将随之更新。

摘要由CSDN通过智能技术生成

当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。这时候就要使用到vue.set()方法。

通过setter实现监视，对象中后追加的属性，Vue默认不做响应式处理，给后添加的属性做响应式，要：

1.Vue.set(target，propertyName/index，value)

Vue.set 多了getter 和setter方法所以能够响应式

示例代码

const vm = new Vue({
      el: "#root",
      data: {
        user: {
          name: "tom",
          age: {
            rAge: 40,
            sAge: 29,
          },
          friends: [
            { name: "aa", age: 17 },
            { name: "bb", age: 18 },
          ],
        },
      },
      methods: {
        addSex() {
          Vue.set(this.user, "sex", "女");
        },
      },
    });

注意：只能给data里的某个属性追加属性，不能给data追加属性(也就是说target不能是vm和vm.data）

2.vm.$set(target，propertyName/index，value)

this.$set 多了getter 和setter方法所以能够响应式，这里的this指代vm

示例代码

const vm = new Vue({
      el: "#root",
      data: {
        user: {
          name: "tom",
          age: {
            rAge: 40,
            sAge: 29,
          },
          friends: [
            { name: "aa", age: 17 },
            { name: "bb", age: 18 },
          ],
        },
      },
      methods: {
        addSex() {
          this.$set(this.user, "sex", "女");
        },
      },
    });

注意：Vue.set() 和 vm.$set() 都不能给vm或vm的根数据对象添加属性,都必须用于向响应式对象上添加新属性。