$set 概述

什么时候使用set？

定义一个对象：         

item:{
            oldProperty:"旧属性"
        }

定义一个方法：

addProperty(){
            this.items.newProperty = "新属性"  

            // 为items添加新属性
            console.log(this.items)  

            // 输出带有newProperty的items
        }

点击按钮，发现结果不及预期，数据虽然更新了（console打印出了新属性），但页面并没有更新

为什么产生上面的情况呢？

下面来分析一下

vue2是用过Object.defineProperty实现数据响应式

const obj = {}
Object.defineProperty(obj, 'foo', {
        get() {
            console.log(`get foo:${val}`);
            return val
        },
        set(newVal) {
            if (newVal !== val) {
                console.log(`set foo:${newVal}`);
                val = newVal
            }
        }
    })
}
当我们访问foo属性或者设置foo值的时候都能够触发setter与getter

obj.foo   
obj.foo = 'new'
但是我们为obj添加新属性的时候，却无法触发事件属性的拦截

obj.bar  = '新属性'
原因是一开始obj的foo属性被设成了响应式数据，而bar是后面新增的属性，并没有通过Object.defineProperty设置成响应式数据

解决方案
Vue 不允许在已经创建的实例上动态添加新的响应式属性，所以要用$set解决

vue中$set的用法

$set用来更新数组或对象

$set接收3个参数：

参数1:参数是需要更新的数组或对象，

参数2:是数组的下标或者对象的属性名，

参数3:是更新的内容

例如：
let arr =["周一","周二","周三","周四","周五","周六"];

//第一个参数是数组，第二个参数是下标索引，第三个参数是新的内容

this.$set(arr,5,"周日"];

//结果

console.log(arr);//arr=["周一","周二","周三","周四","周五","周日"]

再例如：

//对象的属性sex的值更新为"女"

let obj={name:"小明",age:18,sex:"男"};

 

//第一个参数是对象，第二个参数是更新的属性名称，第三个参数是更新的内容

this.$set(obj,"sex","女");

 

//结果

console.log(obj)//obj={name:"小明",age:18,sex:"女"}