详解Vue数据驱动原理

Vue区别于传统的JS库，例如JQuery，其中一个最大的特点就是不用手动去操作DOM，只需要对数据进行变更之后，视图也会随之更新。proxy分别传入vm,'_data',data中的key值,定义如下:proxy函数的逻辑很简单，就是对vm._data上的数据进行代理，vm._data上保存的就是data数据。Observe类要做的事情通过查看源码也是清晰明了，对数据进行响应式处理，并对数组的原型方法进行重写！defineReactive函数就是实现依赖收集和派发更新的核心函数了，实现代码如下。我们在分析denfineReactive的时候，在对数据进行响应式操作的时候，通过Object.defineProperty重写了getter函数。其中的dep.depend()实际上就是执行了Dep.target.addDep,this指向Dep实例,而Dep.target是一个Watcher实例，即执行watcher.addDep函数。到这里，Vue的数据驱动原理我们就分析完了，如果还对这个流程不大清楚的，可以结合参考官方给的图解:总结