BraveWangDev

专栏概览与目录；写作回顾、重构规划、重构过程记录与问题汇总；持续更新中...

上篇，介绍了《组件部分-组件挂载流程简述》；响应式数据原理（第一篇 ~ 第十篇）模板编译原理（第十一篇 ~ 第二十篇）依赖收集、异步更新、生命周期（第二十一篇 ~ 第二十七篇）diff 算法原理（第二十八篇 ~ 第三十三篇）组件部分（第三十四篇 ~ 第四十二篇）响应式数据原理部分：写的有些乱，顺序上还需要再做调整，好在事情讲清楚了；模板编译原理部分：部分内容仍需要再细化，要把流程讲清楚，让人一看就懂；diff 算法部分：还需要添加一些必要图示和动画，这部分不难，但做好不容易；

上篇，组件部分-生成组件的真实节点；本篇，组件部分-组件挂载流程分析；

上篇，介绍了组件部分-组件的生命周期，主要涉及以下几部分：本篇，组件部分-生成组件的真实节点；

本篇，组件部分-组件的生命周期；

本篇，介绍了组件部分-组件的生命周期，主要涉及以下几部分：1）介绍了组件生命周期的实现；2）介绍了如何进行组件的初始化和挂载；

本篇，介绍了组件部分-组件的编译，主要涉及以下几部分：1，对组件初始化流程、模板解析流程进行回顾；2，组件的编译流程分析；2-1，组件html模板 -> AST语法树 -> render函数 -> 组件vnode；3，扩展 createElement 方法，创建组件虚拟节点；3-1，判断 tag 是组件 or 元素；3-2，获取 Vue.extend 方法，创建组件构造函数；3-3，扩展 vnode 结构，支持组件选项 componentOptions；3-4，扩展组件选项 componentOption；

本篇，介绍了组件部分-组件合并的实现，主要涉及以下几个点：1，组件注册流程梳理；2，组件合并的分析；2-1，组件合并的必要性；2-2，组件合并的问题；3，组件合并的实现；3-1，生命周期的合并策略-策略模式回顾；3-2，组件合并策略的实现；4，组件合并的测试；

本篇，介绍了 Vue.extend 实现，主要涉及以下几个点：1，Vue.extend 简介；2，Vue.extend 实现的分析与代码框架；3，组件初始化的分析与实现；4，子类继承父类的分析与实现；5，Vue.extend 的功能测试；6，组件的选项合并；7，Vue.extend 的补充说明；

本篇，主要介绍了 Vue 初始化流程中的 Vue.component 实现：1，Vue.component 全局 API 的初始化处理；2，Vue.component 的定义和参数说明；3，组件构造函数全局存储的方式和作用；

本篇，介绍了 Vue 组件与初始化流程，涉及以下几部分：1，组件使用介绍：组件定义和优先级；2，组件初始化流程介绍：Vue.component、Vue.extend、保存组件构造函数、组件合并、初渲染和更新；

本篇，diff算法阶段性梳理，主要涉及以下几个点：1，初渲染与视图更新流程；2，diff 算法的外层更新；3，diff 算法的比对优化；4，diff 算法的乱序比对；5，初渲染和更新渲染判断；

本篇，diff 算法-乱序比对，主要涉及以下几个点：1，介绍了乱序比对的方案；2，介绍了乱序比对的过程分析；3，实现了乱序比对的代码逻辑；

本篇，diff算法-比对优化（下），主要涉及以下几个点：1，介绍了儿子节点比较的流程；2，介绍并实现了头头、尾尾、头尾、尾头4种特殊情况比对；

本篇，diff算法-比对优化（上），主要涉及以下几个点：1，介绍了如何进行儿子节点比对；2，新老儿子节点可能存在的3种情况及代码实现；3，新老节点都有儿子时，diff 的方案介绍与处理逻辑分析；

本篇，介绍了diff算法-节点比对，主要涉及以下几点：1，介绍了 diff 算法、对比方式、节点复用；2，实现了外层节点的 diff 算法；3，不同节点如何做替换更新；4，相同节点如何做复用更新：文本、元素、样式处理；

本篇，diff算法问题分析与patch方法改造，主要涉及以下几点：1，初始化与更新流程分析；2，问题分析与优化思路；3，新老虚拟节点比对模拟；4，patch 方法改造；

本篇，介绍了 Vue 生命周期的实现，主要涉及以下几点：1，Vue.mixin 介绍和使用；2，Vue 全局 api 和实例 api 的使用和实现；3，Vue.mixin 的说明和实现；4，生命周期的说明和实现；

本篇，主要介绍了数组依赖收集的实现：1，对象依赖收集的总结；2，数组依赖收集的位置；3，数组和对象本身做依赖收集；4，数组中嵌套对象（对象或数组）的递归处理；

本篇，主要介绍了数组依赖收集的原理：1，数组的响应式实现；2，数组的依赖收集方案介绍；3，数组依赖收集的入口；4，添加 dep 后，对象的收益；

本篇，主要介绍了 Vue 的异步更新流程，主要涉及以下几点：1，为什要做异步更新；2，异步更新的实现思路；3，数据变更缓存的位置；4，缓存 watcher 更新逻辑；5，vm.$nextTick 获取更新后的 dom；6，测试异步更新；

本篇，介绍了 Vue依赖收集的视图更新部分，主要涉及以下几点：视图初始化时：1，render方法中会进行取值操作，进入 Object.defineProperty 的 get 方法；2，get 方法中为数据添加 dep，并记录当前的渲染 watcher；3，记录方式：watcher查重并记住 dep，dep 再记住 watcher；数据更新时：1，当数据发生改,会进入 Object.defineProperty 的 set 方法；2，在 set 方法中，使 dep 中收集的全部 watcher 执行视图渲染

本篇， dep 和 watcher 关联；1，介绍了依赖收集的必要性；2，介绍了 Watcher 和 Dep 的作用；3，实现了 Watcher 类和 Dep 类；4，Watcher 和 Dep 如何产生关联；

本篇，主要介绍了 Vue 依赖收集的过程分析：1，介绍了 Vue 的响应式特性；2，介绍了 Vue 的依赖收集过程；3，介绍了 dep 和 watcher 以及观察者模式；

本篇，使用真实节点替换原始节点，主要涉及以下几点：1，新老节点的更新方案；2，虚拟节点与真实节点映射；3，实现新老节点的替换；

本篇，根据 vnode 虚拟节点创建真实节点，主要涉及以下几点：1，vnode 渲染真实节点的步骤；2，Vue 原型方法 _update 的扩展；3，patch 方法中的两个步骤：1）创建真实节点；2）替换掉老节点；4，createElm实现：根据虚拟节点创建真实节点；

本篇，根据 render 函数，生成 vnode，主要涉及一下几点：1，封装 vm._render 返回虚拟节点；2，_s，_v，_c的实现；

本篇，生成 render 函数 - 函数生成，主要做了以下两件事：1，使用 with 对生成的 code 进行一次包装；2，将包装后的完整 code 字符串，通过 new Function 输出为 render 函数；

本篇，主要介绍了生成 render 函数 - 代码拼接：1，render 函数的分析和实现方案；2，拼接 render 函数结构：generate(ast)；3，处理属性及属性值中的样式：genProps(ast.attrs)；4，递归处理儿子：genChildren(el)；5，对文本和变量进行包装处理，详细分析文本处理流程；

本篇，生成 ast 语法树 - 构造树形结构部分：1，基于 html 特点，使用栈型数据结构记录父子关系；2，分析开始标签，结束标签及文本的ast构建逻辑和代码实现；3，重构 html 解析与 ast 语法树构建部分代码；4，对 ast 语法树构建的过程分析；

本篇，主要介绍了生成 ast 语法树 - 模板解析部分，主要涉及以下几个点：使用正则对 html 模板进行解析和处理，匹配到模板中的标签和属性：1，解析开始标签-parseStartTag方法；2，截取匹配完成的部分-advance方法；3，解析开始标签中的属性-while循环；4，开始标签处理过程的详细说明；5，对开始标签、结束标签及文本的发射处理；

本篇，主要介绍了生成 ast 语法树-正则说明部分，涉及以下几个点：1，介绍了html模板的解析原理；2，详解源码中模板解析相关的7类正则；1）匹配标签名；2）匹配命名空间标签名；3）匹配开始标签-开始部分4）匹配结束标签；5）匹配属性；6）匹配开始标签-闭合部分；7)匹配插值表达式；

本篇，主要介绍了生成 ast 语法树 - 流程说明，涉及以下几个点：1，Vue 核心渲染流程回顾；2，三种模板写法及优先级；3，两种数据挂载方式；4，Vue 的原型方法 $mount；5，compileToFunction -> parserHTM流程说明；

本篇，主要介绍了 vue 数据渲染的核心流程，初渲染与更新渲染：1，通过`template`模板，生成`ast`语法树；2，根据`ast`语法树，生成`render`函数；3，根据`render`函数，生成`vnode`虚拟节点；4，根据`vnode`虚拟节点，创建真实节点；5，使用真实节点替换原始节点；

第十篇 - 数组数据变化的观测情况；实现了数组数据变化被劫持后，已重写原型方法的具体逻辑；数组各种数据变化时的观测情况分析；至此，数据劫持就全部完成了

第九篇-对象数据变化的观测情况；实现了对象老属性值变更为对象、数组时的深层观测处理；结合实现原理，说明了对象新增属性不能被观测的原因，及如何实现数据观测；

第八篇 - 数组的深层劫持；数组深层观测的实现；对数组进行 observe 递归观测操作；实现数组中嵌套结构的劫持，即数组嵌套数组、数组嵌套对象；

第七篇 - 阶段性梳理；通过断点调试，对当前版本数据劫持、数据代理进行了简单的流程梳理；同时，对照 Vue2.x 提供的功能，分析了当前版本数据观测的问题和不足；

第六篇 - 数据代理的实现；data暴露到vm._data 实例属性上；利用Object.defineProperty将vm.xxx操作代理到vm._data上；

第五篇 - 数组的劫持；出于对性能的考虑，Vue 没有对数组类型的数据使用 Object.defineProperty 进行递归劫持，而是通过对能够导致原数组变化的 7 个方法进行拦截和重写实现了数据劫持；