vue系列-vue进阶

源码学习总结

1. 函数柯里化的使用，如patch部分。

2. 工具类纯函数的封装和解耦，不管多小的功能，如判断值是否有效，!== null || !== undefined 也可以封装成纯函数。

3. 代码中节点的处理使用了深度优先的思想和递归。

4. 闭包。善用闭包，将简单的暂存操作也可以提取成闭包进行代码优化。

5. 策略模式。options的合并策略。

6. 链表数据结构。类似链表的数据结构建立组件间的父子关系。

7. 确保函数只执行一次。

   export function once (fn: Function): Function {
     let called = false
     return function () {
       if (!called) {
         called = true
         fn.apply(this, arguments)
       }
     }
   }

patch

patch 的整体流程： createComponent -> 子组件初始化 -> 子组件 render -> 子组件patch

activeInstance 为当前激活的 vm 实例；vm.$vnode 为组件的占位 vnode；vm._vnode 为组件的渲染 vnode。

嵌套组件的插入顺序是先子后父。

子组件构造

子组件的构造器是继承于Vue构造器的。

组件的插入是先子后父，递归到子组件深度后执行插入。

占位符VNode表示在父组件中占位的组件，真实渲染是需要进入到占位符的组件中去拿到数据渲染。

合并策略

外部调用场景下的合并配置是通过 mergeOption，并遵循一定的合并策略。

组件合并是通过 initInternalComponent，它的合并更快。

框架、库的设计都是类似，自身定义了默认配置，同时可以在初始化阶段传入配置，然后 merge 配置，来达到定制化不同需求的目的。

周边生态

插件编写

Vue 编写插件的时候通常要提供静态的 install 方法。

如果没有 install 方法则插件本身就是安装过程。

参考链接

系列链接

Vue 渲染器 - Hcysunyang

Vue.js技术揭秘：GitHub源码部分 - https://github.com/ustbhuangyi/vue-analysis

VUE深入浅出系列 – 看云

Vue源码分析

涉及到的MDN知识点部分

因为后面懒得整理了。

document.querySelector()：文档对象模型Document引用的querySelector()方法返回文档中与指定选择器或选择器组匹配的第一个 HTMLElement对象。 如果找不到匹配项，则返回null。

提示: 匹配是使用深度优先先序遍历，从文档标记中的第一个元素开始，并按子节点的顺序依次遍历。

element.outerHTML： element DOM接口的outerHTML属性获取描述元素（包括其后代）的序列化HTML片段。它也可以设置为用从给定字符串解析的节点替换元素。