this.$set()的用法

这是个大坑，虽然我自身并没有踩过这个坑。是前两天我朋友跟我说的。
附上代码

   <div id="app">
      <ul>
        <li v-for="item in obj">
          {{ item }}
        </li>
      </ul>
      <button @click = addObj>添加Obj</button>
    </div>

var vm = new Vue({
      el: "#app",
      data: {
        obj: {
          a: "obj.a"
        }
      },
      methods: {
          addObj() {
            this.obj.b = 'obj.b'
            //this.$set(this.obj, 'b' ,'obj.b')
              console.log(this.obj)
          }
      }
    });

很简单的一段代码
这是该页面刚开始的样子
点击添加Obj按钮之后
可以看到obj对象中成功添加了属性b,值为‘obj.b’ 但是，并没有同步渲染到页面上,这是因为Vue最初实例化的时候，Obj中没有属性b，故而如果用this.obj.b添加属性的话Vue不会把他作为响应式监听。
所以应该要使用this.$set(‘对象名’,要修改的属性名,属性值),这样新添加的属性值会被Vue监听到并且同步渲染到页面上，如下所示:
需要注意的是数组也是同样的
例子很简单，但是项目中没注意的话很可能会踩大坑。这里心疼一波我的踩坑朋友。