View Code? Open in Web Editor
NEW
Simple implementation of vue
License: MIT License
JavaScript 16.02%
HTML 16.96%
TypeScript 67.02%
tiny-vue's Introduction
- runtime-core
- render-api
- component (创建组件)
- createApp (创建应用)
- createVNode (创建虚拟节点)
- h (渲染函数)
- index (入口)
- renderer (渲染器)
- shared
- index (入口)
- shapeFlags (节点类型定义)
- 调用 createApp 函数
- 创建 app 对象。包含 component（节点）、container（容器）、mount（挂载函数）
- 调用 app 对象中的 mount 函数
- 根据传入的 container 和先有的 component 创建 VNode
- VNode:
- el - DOM 元素
- component - 组件
- type - 节点
- props - 属性
- children - 子组件
- shapeFlag - 节点类型
- 调用渲染器 renderer 中的 render 函数
- render 函数
- patch 函数
- 文字节点
- 注释节点
- 静态节点
- fragment 节点
- 标签节点
- processElement 函数，未挂载调用 mountElement， 挂载调用 updateElement
- mountElement
- 因为是标签，则直接创建 DOM 元素
- 判断子组件类型，文本类型 则直接将文本设置到 DOM 上，多节点则调用 mountChildren
- mountChildren 函数中 循环遍历每一个子节点，然后调用 patch 函数
- 处理 props。调用 hostPatchProp
- beforeMount hook
- 将当前 DOM 插入到 容器中
- mounted hook
- updateElement
- 设置 n2.el = n1.el
- patchProps 函数比较新旧节点的属性
- 循环新节点的 props，prop 不一致则更新
- 查找旧节点中有，而新节点中没有的，则移除
- 新节点中有，而旧节点中没有的，则新增
- patchChildren 函数比较新旧节点的子节点
- 判断当前节点的类型，是文本子节点，则比较新旧子节点，然后更新
- 组件节点
- processComponent 函数，未挂载调用 mountComponent，挂载调用 updateComponent
- mountComponent
- 创建组件实例
- setupComponent 函数
- initProps
- initSlots
- setupStatefulComponent
- 调用实例上的 setup 函数
- 处理 setup 的回调值，调用 handleSetupResult 函数
- 判断是 function 还是 object
- 调用 finishComponentSetup
- setupRenderEffect 函数
- 调用 effect 函数，传一个方法入参
- updateComponent
- example/apiinject/App.js 注释代码无法实现功能。
tiny-vue's People
Watchers
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent