vue2响应式数据原理

在Vue2中，响应式原理是其核心之一。它使得数据与视图可以双向绑定，当数据发生改变时，视图会自动更新，反之也成立。那么，Vue2是如何实现响应式的呢 Object.defineProperty() 响应式 要解释什么是响应式原理，先得要知道什么是响应式 在我这边理解响应式是指当数据改变后vue会通知到使用该数据的代码 怎么简单的理解呢 比如说视图渲染使用了一个数据 那么当这个数据改变后 视图会响应式的自动更新 修改的话 只需vm.name=”hl” 就能呈现效果 就是不需要去手动的去修改Dom来更新数据了

响应式数据原理 Vue是通过Object.defineProperty() 他来更新定义data中的所有属性 通过Object.defineProperty可以使数据的一个获取 还有设置get and set 增加一个拦截的功能 他们拦截属性的获取 然后进行一个依赖的收集 拦截属性的更新操作进行一个通知

从源码中vue他是如何实现数据响应的 首先vue它使用的是那个initial data 初始化用户传入的参数 然后使用new Observer对数据进行观测 如果数据是一个对象类型 然后就会调用this.work(value)对对象进行一个处理 他内部使用defineReactive 循环对象属性定义响应式变化 他的内核核心就是使用Object.defineProperty() 重新定义数据 如果传入的是对象他会调用this.work进行处理 那么vue他都是如何观测数组变化的呢 首先要知道数组的一些方法 pop，push，shift，unshift，splice，sort，reverse 如果这些执行了 就更新操作