vue2 中的$set是什么?怎么用?

1. 定义: $set是用来解决vue2里数据变化视图不更新的问题. 手动添加响应式的效果

2. 原因: 由于JavaScript的限制( Object.defineProperty() )，Vue无法检测到data中数组和对象的变化 --- Vue 会在初始化实例时对 属性 执行 getter/setter 转化，所以 属性 必须在 data 对象上存在才能让 Vue 将它转换为响应式的

因此要使数据是响应式 , 有以下方法 :

1. 对于对象

1.1 在实例还没创建时,可以直接将属性写在data里 ;

1.2 实例已经创建时 , 可以将对象整个替换,也就是用 = 赋值 , 或者使用Vue.set(object, 属性名, value)将属性添加到实例对象上 , 但这种方式不允许在根级动态添加属性 , 只能向嵌套对象添加 ;

1.3 此时就可以用$set来解决 , 语法是 this.$set(this.someObject , '属性名' , 值) , 它的实现原理是 : 先判读属性是否存在、对象是否是响应式，最终如果要对属性进行响应式处理，则是通过调用 defineReactive 方法进行响应式处理（ defineReactive 方法就是 Vue 在初始化对象时，给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法）

1.4 使用场景 : 启用表格行内编辑时,点击编辑显示input框,这时需要另设一个响应式属性isEdit来控制切换,就可以使用$set

2. 对于数组

2.1 V2不能检测到直接利用索引设置数组项或者修改数组长度的情况 .

2.2 这时要使数组数据发生改变但数据仍是响应式时 , 有以下方法 : 直接给数组赋值 ; 或者用规定的7种方法对数组增删改查 : push pop shift unshift splice sort reverse ,这些方法都会改变原数组 ;

2.3 或者使用V2提供的api--this.$set() , 它的内部就是对 splice 方法的封装 ,语法是 this.$set(数组名, 索引, 值)

这里贴一下我写的思维导图: