简介

熟悉vue的人估计都在关注的个项目，这个项目最开始是围绕vuejs源码分析,做到一定程度决定不再维护源码详解，而转向设计思想布道，vuejs源码分析就转到elegant branch下，主分支(master)专注讲渲染器(render)，专注围绕vue3框架设计精髓，只为一个目标: 源码会一直迭代，但你只需要掌握核心设计原则。github star 4.1K , 我估计等vue3真正发布的时候，这个项目Github star 一定可以到14K , MIT协议。

阅读感悟

从Jquery时代如何render一个组件DOM讲起，进而提到Virtual DOM, 再由Virtual DOM扩展到怎么创建Virtual DOM，Virtual DOM怎么绑定数据和属性，挂载原理(有状态组件挂载与函数式组件挂载)，怎么更新Virtual DOM直至更新DOM(patch)，怎么优化性能(Diff 算法原理)，写的十分详细，也容易理解，希望大家都去阅读，尤其是想深入了解vuejs的框架的。感谢github项目作者HcySunYang，通过学习，让我更加深入了解了vuejs, 必须有空就来阅读一遍，加深理解。Virtual DOM文章用VNode代替，个人更喜欢Virtual DOM，所以VNode 也就是Virtual DOM。

Virtual DOM种类

Virtual DOM种类对应挂载函数

Diff 算法

vue3框架设计精髓(渲染器)目录大纲

• 一、组件的本质

1. 组件的产出是什么
2. 组件的 VNode 如何表示
3. 组件的种类

• 二、先设计 VNode 吧

1. 用 VNode 描述真实 DOM
2. 用 VNode 描述抽象内容
3. VNode 的种类
4. 使用 flags 作为 VNode 的标识
5. 枚举值 VNodeFlags
6. chidlren 和 ChildrenFlags
7. VNodeData

• 三、辅助创建 VNode 的 h 函数

1. 在 VNode 创建时确定其类型 – flags
2. 在 VNode 创建时确定其chidlren的类型
3. 使用 h 函数创建 VNode

• 四、渲染器之挂载

1. 责任重大的渲染器
2. 挂载普通标签元素

• 2.1、基本原理
• 2.2、class的处理
• 2.3、Attributes 和 DOM Properties
• 2.4、事件的处理

1. 挂载纯文本、Fragment 和 Portal

• 3.1、挂载文本节点
• 3.2、挂载 Fragment
• 3.3、挂载 Portal

1. 有状态组件的挂载和原理
2. 函数式组件的挂载和原理

• 五、渲染器之patch

1. 基本原则
2. 替换 VNode
3. 更新标签元素

• 3.1、更新标签元素的基本原则
• 3.2、更新 VNodeData
• 3.3、更新子节点

1. 更新文本节点
2. 更新 Fragment
3. 更新 Portal
4. 有状态组件的更新

• 7.1、主动更新
• 7.2、初步了解组件的外部状态 props
• 7.3、被动更新
• 7.4、我们需要 shouldUpdateComponent

1. 函数式组件的更新

• 六、渲染器的核心 Diff 算法

1. 核心 Diff 算法的发展史
2. React 的核心 Diff 算法原理
3. Vue2 的核心 Diff 算法原理
4. Vue3 所采用的核心 Diff 算法及原理

• 4.1、相同的前置和后置元素
• 4.2、移动次数总是最少的
• 4.3、最长递增子序列
• 七、自定义渲染器

1. 自定义渲染器的原理
2. 自定义渲染器的应用