Vue 源码解析：首次渲染完整流程与核心机制

首次渲染

在 src/core/instance/index.js 文件中，Vue 实例的初始化始于 this._init 方法的调用。

该方法内部执行了一系列初始化逻辑，包括合并选项、初始化生命周期、事件中心以及数据响应式系统等核心模块。

$mount 方法内部逻辑取决于构建版本。如果是包含编译器的版本，会先执行模板编译流程，将 template 或 el 选项转换为 render 函数。

对于运行时版本，$mount 方法直接定义在 runtime/index 中，其核心职责是调用 mountComponent 函数来执行实际的 DOM 渲染操作。

进入 runtime/index 中的 $mount 方法后，可以看到最终调用了 mountComponent 函数来渲染 DOM。

该函数定义在 core/instance/lifecycle 文件中，是连接 Vue 实例与 DOM 更新的核心桥梁。

src/core/observer/watcher 模块负责处理依赖收集和更新逻辑，Watcher 实例的创建是触发渲染的关键环节。

总结

首次渲染过程

• Vue 初始化过程涉及实例成员与静态成员的完整构建，确保实例具备完整的 API 和功能。
• 通过 new Vue() 构造函数创建 Vue 实例，这是整个应用启动的入口。
• 构造函数内部调用 this._init() 方法，执行初始化配置。
• vm.$mount() 方法位于 src/platforms/web/entry-runtime-with-compiler.js 文件中，负责处理包含编译器的挂载逻辑。
  • 如果用户没有直接传递 render 函数，系统会自动将传入的模版编译成 render 函数，以支持模板语法。
  • compileToFunctions() 工具函数负责解析模板并生成高效的 render() 渲染函数，优化执行性能。
  • 编译生成的 render 函数被赋值给 options.render，作为后续渲染的蓝图。
• vm.$mount() 方法在 src/platforms/web/entry-runtime-with-compiler.js 中定义，最终调用 mountComponent 函数执行挂载。
• mountComponent(this,el) 调用位于 src/core/instance/lifecycle.js 文件中，执行核心的组件挂载逻辑。
  • 系统会判断是否存在 render 选项，若不存在但传入了模版，且当前处于开发环境，则会发送警告提示，引导开发者正确配置。
  • 在挂载前，触发 beforeMount 生命周期钩子，允许在挂载前进行最后的准备工作。
  • 定义 updateComponent 函数，该函数负责在数据变化时重新执行渲染逻辑，实现视图更新。
  • 创建 Watcher 实例，将 updateComponent 作为更新回调，并设置同步更新模式，确保渲染同步执行。
  • 挂载完成后，触发 mounted 生命周期钩子，此时 DOM 已插入文档，可执行依赖 DOM 的操作。
  • 最后返回 vm 实例，完成挂载过程。
• watcher.get() 方法被调用，触发依赖收集和初始渲染过程。
  • 创建完 Watcher 之后会调用一次 get 方法，触发依赖收集和初始渲染。
  • get 方法内部调用 updateComponent 函数，启动渲染流程。
  • 调用 vm._render 函数创建 VNode，将组件结构转换为虚拟 DOM 树。
    • updateComponent 内部调用 render.call(vm._renderProxy, vm.$createElement)，执行渲染函数。
    • 调用实例化时 Vue 传入的 render 函数，若用户提供了自定义 render 则执行该函数。
    • 或者执行由编译 template 生成的 render 函数，将模板转换为虚拟 DOM 节点。
    • render 函数返回 vnode（虚拟 DOM 节点），作为后续真实 DOM 生成的依据。
  • 调用 vm._update 方法，内部调用 vm.__patch__ 方法，将虚拟 DOM 转换为真实 DOM 并挂载到页面，同时记录 vm.$el 指向根元素。

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注本站的更多内容!