vue3运行时执行过程步骤

在 Vue 3 中，运行时的执行过程是一个复杂但高效的机制，主要包括初始化应用、渲染、响应式更新和销毁等阶段。以下是 Vue 3 运行时的执行过程的核心步骤和流程：

1. 应用初始化

1.1 创建 Vue 应用

调用 createApp 方法，创建一个 Vue 应用实例。

javascript 复制代码

const app = createApp(App);

Vue 应用实例用于管理整个应用。
App 是根组件（通常是一个对象或 SFC 文件）。

1.2 挂载应用

通过调用 app.mount('#app') 挂载根组件。

Vue 将根据传入的选择器（如 #app），找到 DOM 容器作为根组件的挂载点。
Vue 运行时会将根组件渲染为虚拟 DOM，并将其挂载到真实 DOM 上。

2. 虚拟 DOM 创建与初次渲染

2.1 渲染函数生成虚拟 DOM

Vue 使用组件定义的 render 函数或编译好的模板函数，生成虚拟 DOM（VNode）。

如果使用模板，模板会被预先编译为渲染函数。
渲染函数返回一棵描述 UI 结构的虚拟 DOM 树。

2.2 虚拟 DOM 转换为真实 DOM

Vue 使用虚拟 DOM 树，通过Diff 算法将其转换为真实 DOM，并插入到页面中。

调用 patch 方法，递归地创建 DOM 元素并绑定事件等。

3. 组件系统

3.1 创建子组件

当虚拟 DOM 中遇到子组件：

Vue 会递归创建子组件实例。
子组件的 props 会从父组件传递下去。
子组件的生命周期钩子函数会被依次触发（setup、mounted 等）。

3.2 `setup` 执行

Vue 3 使用 setup 作为组合式 API 的入口：

初始化响应式数据和计算属性。
绑定方法和事件。
返回的数据和方法将暴露给模板使用。

4. 响应式系统

4.1 数据初始化

Vue 3 的响应式系统基于 Proxy，在 setup 中通过 reactive 或 ref 创建响应式对象：

javascript 复制代码

const state = reactive({ count: 0 });

Vue 会拦截对 state.count 的读取和修改操作。

4.2 依赖收集

当组件渲染时，Vue 会跟踪使用响应式数据的所有依赖（如模板中的绑定或计算属性）。
依赖收集基于 Effect （副作用函数），Vue 通过 watchEffect 等机制跟踪变化。

4.3 数据更新

当响应式数据发生变化时，Vue 会通过 scheduler 触发更新。
Vue 会重新运行依赖该数据的渲染函数或副作用函数。
Vue 只会更新受影响的部分 DOM（基于虚拟 DOM Diff 算法）。

5. 更新过程

5.1 虚拟 DOM Diff

Vue 会对比新旧虚拟 DOM 树，找出需要更新的节点。
通过 Diff 算法，Vue 可以高效地确定变化点。

5.2 真实 DOM 更新

Vue 根据 Diff 结果对真实 DOM 进行最小化更新（增、删、改 DOM 节点）。
确保性能优化，避免不必要的重绘和重排。

6. 销毁与卸载

当组件被销毁或卸载时，Vue 会执行以下步骤：

生命周期钩子 ：触发 beforeUnmount 和 unmounted 钩子。
依赖清理：移除所有绑定的事件监听器和依赖关系。
DOM 清理：从 DOM 树中移除组件相关的节点。

Vue 3 运行时的执行过程总结

以下是完整流程的概览：

初始化应用：创建并挂载根组件。
首次渲染：通过模板或渲染函数生成虚拟 DOM，并渲染到真实 DOM。
响应式系统 ：通过 Proxy 跟踪数据变化，依赖收集和更新。
数据更新：响应式数据变化触发虚拟 DOM Diff 和真实 DOM 的高效更新。
销毁与清理：卸载组件时清理相关资源。

Vue 3 的运行时架构利用虚拟 DOM 和响应式系统实现了高效的渲染与更新，同时通过组合式 API 提供了灵活的开发体验。