成都APP 微网站开发齐诺网站建设东莞网站建设做网站

vue2采用数据代理+数据劫持+发布订阅模式的方法。

在初始化vue实例时，会把data对象和data对象的属性都添加到vm对象中，通过object.defineProperty()进行数据代理，用vm对象的属性来代理data对象的属性，并在Observer类中递归遍历data对象，对data对象中的每个属性都进行数据劫持，都指定一个getter、setter。

例外的，对于数组，不能通过object.defineProperty()进行数据代理，因为监听的数组下标变化时会出现数据错乱问题，所以数组是调用数组重写的原生方法来实现响应式。

当通过vm对象修改data对象中的属性时，会触发data属性的setter方法，然后触发它Dep实例的notify方法进行依赖分发，通知所有依赖的Watcher实例执行内部回调函数。最后会触发renderWatcher回调，会重新执行render函数，重新对比新旧虚拟DOM，重新渲染页面。【Watcher回调是异步任务，它的执行会遵循事件循环机制，且重复的Watcher回调不会放到任务队列中，所以多次重复数据更新时，只会重新渲染一次页面】。

当通过vm对象读取data对象中的属性时，会触发data属性的getter方法，然后触发它Dep实例的depend方法进行依赖收集。

当data对象中数组元素发生变化时，会调用数组重写的原生方法，然后触发它Dep实例的notify方法进行依赖分发，通知所有依赖的Watcher实例执行内部回调函数。最后会触发renderWatcher回调，会重新执行render函数，重新对比新旧虚拟DOM，重新渲染页面。

当读取data对象中数组元素时，会触发数组的getter方法，然后触发它Dep实例的depend方法进行依赖收集。