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更改过程中的数据流转。

部分源码

数据变更过程中的订阅/发布模型上图已经清晰的展示了，从图中我们已经知道了可以通过增加watcher来订阅某一项数据的变更。那么，我们只需要把组件render作为一个watcher订阅的话，数据驱动视图的渲染岂不是水到渠成了。Vue正是这么做的！
以下代码片段来自Vue.prototype._mount函数

callHook(vm, 'beforeMount')
vm._watcher = new Watcher(vm, () => {
 vm._update(vm._render(), hydrating)
}, noop)
hydrating = false
// manually mounted instance, call mounted on self
// mounted is called for render-created child components in its inserted hook
if (vm.$vnode == null) {
 vm._isMounted = true
 callHook(vm, 'mounted')
}

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。