⼀、什么是Vue数据响应式

我们先了解到什么是响应式
但是如果用其他的方式，比如：你摔了一跤，你知道这是疼了，那么这就是响应式\

那么我们就来了解Vue数据响应式

就是当数据发⽣改变时，UI页⾯做出响应
⽐如Vue中的data被改变时，页⾯中的就会做出响应
const vm=new Vue({data:{n:0}})\
如果修改vm.n，那么UI中的n会响应我

⼆、Vue中如何实现数据响应式

当你把⼀个普通的 JavaScript 对象传⼊ Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使⽤把这些 property 全部转为

通过getter和setter修改对象属性实现数据响应
定义完成的对象通过Object.defineProperty(obj,'n',{value:4})添加属性

但是Object.defineProperty存在⼀定的问题

Vue只会检查第⼀层属性
必须要有‘n’，才能代理和监听obj.n，没有会出现警告

解决办法：

key 都声明好，后面不再加属性不就行
Vue.set(this.obj,'b',1) 或 this.$set(this.obj,'b',1)

Vue.set 和 this.$set 作⽤

新增key
⾃动创建代理和监听
触发UI更新
给数组添加元素

⽤ Vue.set(this.array,3,'d')实现数据响应
也可以⽤this.array.push('d');实现数据响应，这个push是被Vue修改过的\

data中的数组变异⽅式

vue对数组进行了改变，给数组加了一层原型，在其中Vue修改了7个方法覆盖了之前数组原型的7个方法。调用这些Vue新定义的方法时，在这些新方法里Vue会加上对新添的元素的监听（相当于进行了set操作），把新数据也进行代理，这样vue就能重新监测到数组的变化了更新UI操作

具体的七个变更方法：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

会⾃动添加监听和代理，this.$set 作⽤于数组时，并不会⾃动添加监听和代理

Vue代理模式

let data3 = proxy({ data:{n:0} })
 function Proxy({data}) {
     const obj = {}
     data._n = 1
     Object.defineProperty(obj, 'n', {value: 1}) {
        get () {
            return data.n
        }
        set(value){
            this.n = value
        }
    }
 }

在这里使用了一个闭包对变量形成了一个保护, 其实在我们 new Vue({options})的时候, Vue内部就是做了类似一件事情, 在options 中提供的data 进行了劫持, 当然这样是有缺点的, Vue, 其实也给出了解决办法就是 Vue.set 和 this.$set()

总结

对象中新增的key
1. Vue 没有办法事先监听和代理
2. 要使用 set 来新增 key，创建监听和代理，更新UI
3. 最好提前把属性都写出来，不要新增key
4. 但数组做不到⌈不新增key⌋
数组中新增的key
1. 用 set新增key，会更新UI，但不会创建监听和代理
2. 不过尤雨溪篡改了7个API方便你对数组进行增删
3. 这 7个 API会更新UI，但不会创建监听和代理
4. this.array[n] = xxx，既不会更新UI，也不会自动处理监听和代理
结论：数组新增 key 最好通过7个API

Vue数据响应式理解