《数据劫持之computed和watch的具体源码》:

这一篇是【附录】,比较细地记录computed和watch具体的执行过程。其实还是有利于理解依赖收集和派发更新具体是什么时候发生了,能和 mvvm “首次构建” 和 “重新渲染” 的流程结合起来看。

说是附录,其实如果掌握了其中一些核心的时间点,对于对vue的源码理解是有帮助的。

Vue2的响应式原理,网上的资料太多了。这篇主要是把脉络梳理清楚,并且明确一些核心的概念是怎么实现的。比如依赖收集和派发更新具体指的是什么,还有一些细节处理,才造就了 Vue的合理运作。

总之,响应式原理 = 数据劫持 + 观察者模式 = 依赖收集 + 派发更新 = defineReactive + 同时存在Dep.target

从最高视角看: 已知patch阶段也是 vm.$mount 下的逻辑,但从patch这里开始,首次构建阶段和“数据变化驱动视图改变update阶段”的逻辑才开始明显出现区别。所以单独拿出一个章节来讲patch。

从源码层面看: 可搜索return function patch (oldVnode, vnode, hydrating, removeOnly),找到patch函数的源码。而 patch 函数,实际是由 createPatchFunction 这个工厂函数所返回的:createPatchFunction利用闭包,为 patch 缓存了一些对应运行环境的接口。因此 createPatchFunction 的具体实现先可以不用看,后面也会讲到。

整个 Vue 的运作其实始于 import Vue from 'vue' 执行的那一刻,一开始只是执行一些准备工作,然后到 new Vue 才开始执行核心的流程,也就是开始构建 MVVM。

在上一篇博客有讲到, MVVM 其实就可以划分为2个阶段,“首次构建”+“重新渲染”。之所以会有“重新渲染”,是因为利用了响应式原理,当数据变化时需要重新渲染,还有强制重新渲染也是类似的。

上一篇文章已经介绍了核心模块。这篇文章介绍外围的提供给用户的 api 是怎么实现的,还有如何将变化同步到浏览器 url 的。

对于外围 api,会考虑兼容降级调用浏览器提供的 BOM api,所以先要对这部分知识有一个基本的理解,可以参考本系列文章的第一篇。

这部分代码是真的难读,某某某.push某某某.history满屏幕都是,字段名又是命名得类似而且一词用于多义,有时候都分不清谁是谁了。再者考虑了兼容性问题,就算是搜出来的字段,经常不知道要点进哪个文件去看。