Vue如何实现响应式系统如何实现响应式系统
前言前言
最近深入学习了Vue实现响应式的部分源码，将我的些许收获和思考记录下来，希望能对看到这篇文章的人有所帮助。有什么
问题欢迎指出，大家共同进步。
什么是响应式系统什么是响应式系统
一句话概括：数据变更驱动视图更新。这样我们就可以以“数据驱动”的思维来编写我们的代码，更多的关注业务，而不是dom
操作。其实Vue响应式的实现是一个变化追踪和变化应用的过程。
vue响应式原理响应式原理
以数据劫持方式，拦截数据变化；以依赖收集方式，触发视图更新。利用es5 Object.defineProperty拦截数据的setter、
getter；getter收集依赖，setter触发依赖更新，而组件render也会变为一个watcher callback被加入相应数据的依赖中。
发布订阅发布订阅
利用发布订阅设计模式实现，Observer作为发布者，Watcher作为订阅者，两者无直接交互，通过Dep进行统一调度。
Observer负责拦截get, set；get时触发dep添加依赖，set时调度dep发布；添加Watcher时会触发订阅数据的get，并加入到
dep调度中心的订阅者队列中。
以下的UML类图是Vue实现响应式功能的类，以及他们之间的引用关系。
只包含部分属性方法
上图中的类已经标识的蛮清楚了，但是还是需要一个调用关系图，让调用过程更加清晰，如下图所示。
响应式data对象中，每一项key的劫持get/set函数都闭包了Dep调度实例，这张图显示了一个key更改过程中的数据流转。
评论0