简介
熟悉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框架设计精髓(渲染器)目录大纲
- 一、组件的本质
- 组件的产出是什么
- 组件的 VNode 如何表示
- 组件的种类
- 二、先设计 VNode 吧
- 用 VNode 描述真实 DOM
- 用 VNode 描述抽象内容
- VNode 的种类
- 使用 flags 作为 VNode 的标识
- 枚举值 VNodeFlags
- chidlren 和 ChildrenFlags
- VNodeData
- 三、辅助创建 VNode 的 h 函数
- 在 VNode 创建时确定其类型 - flags
- 在 VNode 创建时确定其chidlren的类型
- 使用 h 函数创建 VNode
- 四、渲染器之挂载
- 责任重大的渲染器
- 挂载普通标签元素
- 2.1、基本原理
- 2.2、class的处理
- 2.3、Attributes 和 DOM Properties
- 2.4、事件的处理
- 挂载纯文本、Fragment 和 Portal
- 3.1、挂载文本节点
- 3.2、挂载 Fragment
- 3.3、挂载 Portal
- 有状态组件的挂载和原理
- 函数式组件的挂载和原理
- 五、渲染器之patch
- 基本原则
- 替换 VNode
- 更新标签元素
- 3.1、更新标签元素的基本原则
- 3.2、更新 VNodeData
- 3.3、更新子节点
- 更新文本节点
- 更新 Fragment
- 更新 Portal
- 有状态组件的更新
- 7.1、主动更新
- 7.2、初步了解组件的外部状态 props
- 7.3、被动更新
- 7.4、我们需要 shouldUpdateComponent
- 函数式组件的更新
- 六、渲染器的核心 Diff 算法
- 核心 Diff 算法的发展史
- React 的核心 Diff 算法原理
- Vue2 的核心 Diff 算法原理
- Vue3 所采用的核心 Diff 算法及原理
- 4.1、相同的前置和后置元素
- 4.2、移动次数总是最少的
- 4.3、最长递增子序列
- 七、自定义渲染器
- 自定义渲染器的原理
- 自定义渲染器的应用