对Vue数据响应式的理解

一、什么是Vue数据响应式

就是当数据发生改变时，UI页面做出响应。

比如Vue中的data被改变时，页面中的就会做出响应

        const vm=new Vue({data:{n:0}})

        如果修改vm.n，那么UI中的n会响应我

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

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。

1.通过getter和setter修改对象属性实现数据响应

2.定义完成的对象通过Object.defineProperty(obj,'n',{value:4})添加属性

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

1.Vue只会检查第一层属性

2.必须要有‘n’，才能代理和监听obj.n，没有会出现警告

解决办法：

Vue.set(this.obj,'b',1)或者this.$se