1、问题描述

在做vue 项目时，有时候需要给data中的对象（obj）添加新的属性（a），并用新的属性做页面显示或者v-if控制，但需要注意的是直接设置新属性的值（this.obj.a=1）vue不会做双向绑定，也就是说页面根本就拿不到这个属性。下面的用法是错误的，你能看出是哪里错吗？页面会输出什么呢？

<template>
  <div @click="addCount">click me {{obj.a}}</div>
</template>

<script>
export default {
  data() {
    return {
      obj: {}
    };
  },
  mounted() {
    this.obj.a = 0
  },
  methods: {
    addCount() {
      this.obj.a += 1
    },
  },
};
</script>

2、正确用法

要想新添加的属性支持vue双向绑定，我们应该使用this.$set方法来进行首次赋值。注意：这里说的是首次赋值

用法如下：

this.$set(对象, 新属性, 值)

修改之前的错误示例

<template>
  <div @click="addCount">click me {{obj.a}}</div>
</template>

<script>
export default {
  data() {
    return {
      obj: {}
    };
  },
  mounted() {
    this.$set(this.obj, "a", 0)
  },
  methods: {
    addCount() {
      this.obj.a += 1
    },
  },
};
</script>