Vue 给对象添加属性

在使用 vue 进行开发时，有时需要向data中的某个对象添加属性，若采用传统的对象添加属性的方法：

<template>
  <div>
    <div>{{userInfo.userName}}</div>
    <div>{{userInfo.userAge}}</div>
    <button @click="showUserAge">显示年龄</button>
    <button @click="increaseUserAge">增加年龄</button>
  </div>
</template>

<script>
  export default {
    name: "test",
    data() {
      return {
        userInfo: {
          userName: 'test'
        }
      }
    },
    methods: {
      showUserAge() {
        this.userInfo.userAge = 18; //传统的添加属性的方法
        console.log(this.userInfo);
      },
      increaseUserAge() {
        this.userInfo.userAge++;
        console.log(this.userInfo);
      }
    }
  }
</script>

点击显示年龄，会发现视图无法更新，年龄无法显示：

控制台输出可以看到对象中是已经添加了这个属性的：

根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。 其实仔细看控制台的信息，可以发现在下面有一对关于 userName 的 get 和 set 方法：

这个是跟 vue 的数据双向绑定有关的，vue会在data中的数据创建时向里面添加getter/setter方法，他们是导致vue数据更新之后会立即渲染到视图的关键。 想要深入了解数据双向绑定可移步： juejin.cn/post/684490…

结论

如果一个数据没有vue为其添加的getter/setter方法，则不会更新到视图上。

解决方法

使用 this.$set(object,key,value)

 methods: {
      showUserAge() {
        //this.userInfo.userAge = 18;
        this.$set(this.userInfo, 'userAge', 18);  //使用this.$set(object,key,value)
        console.log(this.userInfo);
      },
      increaseUserAge() {
        this.userInfo.userAge++;
        console.log(this.userInfo);
      }
    }

点击显示年龄：

点击增加年龄：