this.$set的使用

遇到的场景

处理后端接口返回的数据时，因为需要控制某个状态，往往会这样写：

data() {
    return {
  		id: id,
        personInfo: {}
    }
},
methods: {
    // 获取人员信息函数
    getPersonInfoFn() {
        // 引入的 getPersonInfo 接口
        getPersonInfo({
            id: this.id  // data中的数据
        }).then(res => {
            this.personInfo = res.data;
            // active 无法在视图上显示相应的样式
            this.personInfo.active = true;
        })；
    }
}

尽管这样的写法看似正确，在控制台输出的时候也能 打印出相应的值，但是，在视图上却不能显示 “active” 相应的样式

原因

Object.defineProperty只能劫持已经存在的属性，后增的，或者删除的，都不知道；Vue2针对这些bug单独写了方法处理（$set、$delete）。

在Vue2初始化的过程中，会调用 getter和setter方法(其实是新增加的属性上没有 get和set的方法)，所以该属性必须存在于 data 中，视图层才会响应改数据的变化

解决方法

上面的解决方法是这样的：

// 在赋值前，即 this.personInfo.active = true; 前添加
this.$set(personInfo, "active", false);

使用方法

this.$set(obj, key, value);
// obj 需要在某个对象上添加 某属性的 父级对象
// key 所要添加的 key 
// value key对应的值

使用的时候，十分方便快捷