手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程

目录

一、虚拟 DOM 的核心概念

二、虚拟 DOM 到真实 DOM 的流程

三、手写虚拟 DOM 到真实 DOM 的实现

1. 定义虚拟 DOM 的结构（VNode） 

 2. 创建虚拟 DOM 转真实 DOM 的函数

 3. 挂载虚拟 DOM 到页面

 4. 更新虚拟 DOM 的过程（Diff 算法简化版）

四、完整示例：虚拟 DOM 到真实 DOM 的生命周期

五、总结

---

一、虚拟 DOM 的核心概念

虚拟 DOM 是用 JavaScript 对象（VNode）模拟真实 DOM 结构的轻量级抽象。它的核心作用是：

1. 减少直接操作真实 DOM 的次数：通过对比新旧虚拟 DOM 树的差异（Diff 算法），仅更新变化的部分。
2. 声明式编程：开发者只需关注数据逻辑，无需手动操作 DOM。
3. 跨平台能力：虚拟 DOM 可用于 Web、移动端（如 Weex）或服务端渲染（SSR）

 

二、虚拟 DOM 到真实 DOM 的流程

Vue 的渲染流程可分为以下步骤：

1. 模板编译：将模板（