Vue.$set()———Vue-给对象新增属性

一 背景

当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，此时会更新此属性的值，但是不会更新视图的。

根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

二 例子

<template>
     <div>
    <p @click="addd(obj)">{{obj.d}}</p>
    <p @click="adde(obj)"> {{obj.e}}</p>
</div>
</template>

 <script>
  export default {
      data(){
            return {
                obj:{}
            }
      },
      mounted() {
        // 此时给this.obj赋值
        this.obj = {d: 0};
        // 这时又向其添加新的属性
        this.obj.e = 0;
        console.log('after--', this.obj);
      },
     methods: {
        addd(item) {
            // 这个时候data中能监听obj中的d，并作出数据的变化与视图的更新
            item.d = item.d + 1;
            console.log('item--',item);
        },
        adde(item) {
            // 这个时候，e的数据是变化的，累加的，但是视图不更新
            item.e = item.e + 1;
            console.log('item--',item);
        }
       }
  }
 </scirpt>  

三 解决方法

<template>
     <div>
    <p @click="addd(obj)">{{obj.d}}</p>
    <p @click="adde(obj)"> {{obj.e}}</p>
</div>
</template>

 <script>
  export default {
      data(){
            return {
                obj:{}
            }
      },
      mounted() {
        // 此时给this.obj赋值
        this.obj = {d: 0};
        //this.obj.e = 0;
        // 使用 this.$set()方法
        this.$set(this.obj,'e',0)
        console.log('after--', this.obj);
      },
     methods: {
        addd(item) {
            // 这个时候data中能监听obj中的d，并作出数据的变化与视图的更新
            item.d = item.d + 1;
            console.log('item--',item);
        },
        adde(item) {
            //  这个时候data中能监听obj中的e，并作出数据的变化与视图的更新
            item.e = item.e + 1;
            console.log('item--',item);
        }
       }
  }
 </scirpt>