Vue中对于$set的理解和使用

首先你有没有遇见过 vue数据改变页面没有改变（没有更新）的情况？？？

问题所在：

当vue的data中的数据（对象和数组）在初始化完毕之后 再向其中插入新的属性的时候 那么这时数据发生改变 但是页面视图不会更新

举个例子：

<template>
  <div>
    <h1>{{ obj.name }}--{{obj.age}}</h1>
    <button @click="funClick()">点我添加新内容</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      obj: {
        name: "小黑",
      },
    }
  },
    methods:{
        funClick(){
            //我要添加新内容（那么这时数据发生改变 但是页面视图不会更新）
            this.obj.age=18
            console.log("age",this.obj.age)  //此时这个18是没有的
        }
    }
  
};
</script>

问题所在：

在vue2.0中双向绑定使用的是数据劫持Object.defineProerty() 但是Object.defineProerty() 只会监听初始化的数据 如果初始化完毕了 数据在新增新的内容 Object.defineProerty() 就监听不到 监听不到就没有数据劫持 没有数据劫持就没有双向绑定 所以 数据变了视图也不会改变

解决方法------$set

首先说下语法： this.$set("你要修改谁","你要新增的key"，“你要新增的val”)

基于上面的案例我就是想，中途添加一个新属性并且，数据变视图也要改变怎么写？？

methods：{
    funClick(){
           //this.obj.age=18	
          this.$set(this.obj,"age",18)
          console.log("age",this.obj.age)
    }
}