⚡ 30 秒速记
- 核心判断：生命周期是框架围绕创建、挂载、更新和卸载安排用户副作用的时序契约
- 原理主线：围绕 「责任重大的渲染器」、「挂载普通标签元素」、「挂载纯文本、Fragment 和 Por」 建立输入、状态变化与输出之间的因果关系
- 文章范围：系统讲解了Vue渲染器如何将VNode挂载为真实DOM，包括mount和patch的工作流程，详细分析Fragment、Portal、有状态组件和函数式组件的挂载原理，帮助开发者深入理解Vue底层渲染机制和生命周期管理。
- 边界与代价：父子组件顺序、异步调度和
React并发渲染会让“调用过函数”不等于“已经提交到界面” - 工程落地：副作用必须放在语义匹配的阶段，并在重跑、卸载或依赖变化时正确清理
挂载就是渲染器根据 VNode 类型创建真实节点，并把它插入指定容器。 mount 会按元素、组件、文本、Fragment 或 Portal 分派处理；普通元素还要保存 vnode.el、应用 VNodeData，并依据 childFlags 递归挂载子节点。处理 SVG 时要使用 createElementNS，还需把 isSVG 向后代传递，否则 <circle> 等子元素会落入错误的命名空间。初次渲染走挂载，有旧节点时则应进入 patch，不能把两条路径混在一起。
这篇文章不要按 API 清单来背。先用上面的 Mind Map 建立全局结构，再通过交互 DEMO 观察正常路径和边界路径如何改变状态；阅读正文时重点核对每一步的输入、负责执行的参与者、产生的中间状态以及最终可观察结果。遇到版本敏感结论，要把“历史实现”“当前行为”和“工程兼容策略”分开说明；遇到性能或架构取舍，则用实际指标、失败现象和验证手段支撑判断。
版本校准： 本文出现 Object.defineProperty、Dep、Watcher 和双端 Diff 时，主要描述 Vue 2 实现；Vue 3 使用 Proxy、effect 与新的渲染器路径。Vue 2 已于 2023-12-31 结束维护，新项目应以 Vue 3 为基线，旧项目参考 Vue 2 EOL 官方说明 制定迁移与安全策略。
本章主要讲解渲染器将各种类型的 VNode 挂载为真实 DOM 的原理，阅读本章内容你将对 Fragment 和 Portal 有更加深入的理解，同时渲染器对有状态组件和函数式组件的挂载实际上也透露了有状态组件和函数式组件的实现原理，这都会包含在本章的内容之中。另外本章的代码将使用上一章所编写的 h 函数，所以请确保你已经阅读了上一章的内容。
# 责任重大的渲染器
所谓渲染器，简单的说就是将 Virtual DOM 渲染成特定平台下真实 DOM 的工具(就是一个函数，通常叫 render)，渲染器的工作流程分为两个阶段：mount 和 patch，如果旧的 VNode 存在，则会使用新的 VNode 与旧的 VNode 进行对比，试图以最小的资源开销完成 DOM 的更新，这个过程就叫 patch，或“打补丁”。如果旧的 VNode 不存在，则直接将新的 VNode 挂载成全新的 DOM，这个过程叫做 mount。
