Vue3 从代码到页面，经历了哪些过程？
- Vue SFC 文件经由 vue-loader 拆分成 template、script、css，script 由 Babel-loader等处理完以 script 形式嵌入 HTML，css 经由 style-loader、css-loader 处理完，以 link 形式嵌入 HTML
- template 在编译阶段被编译成渲染函数（render），并将常量节点提升，生成常量节点块（block）
- 运行渲染函数，创建 vnode 组件节点实例（instance）、初始化实例上下文（instance.ctx）、根组件指针（instance.root）、绑定派发事件（instance.emit）等组件级别参数和事件
- 设置组件实例阶段初始化了组件的 props、slot、组件数据（data、setupState、props、ctx）代理、标准化模板或渲染函数、兼容 Options API 等
- 设置并运行带副作用的渲染函数
- 如果是组件更新阶段，数据的变更触发响应式，如果节点类型发生变化，直接覆盖原节点，如果节点类型相同，将更新节点属性，进而将动态节点块部分携带进入 Diff 算法
- Diff 算法首先执行双端比较法，同步新旧子节点的头部、尾部节点
- 如果新节点未处理完，进入新增节点（mount 新节点）阶段
- 如果旧节点未处理完，进入删除多余节点（unmount 旧节点）阶段
- 如果新节点和旧节点都有部分没处理完，进入基于最长递增子序列和二分法的优化节点移动操作阶段
- 记录好所有的新增、移除、移动 DOM 操作
- 完成新旧 VNode 的比较并确定了需要更新的 DOM 操作后，会采用批量更新机制，将更新操作收集起来，在合适的时机统一执行更新，更新 DOM 元素，使 DOM 与新的 VNode 状态相匹配。
