你不知道的Vue2源码执行路线

引言

喜欢请点赞，支持点在看。关注牛马圈，干货不间断。

深入解析Vue2源码执行路线：从实例化到渲染更新的完整流程

阅读本文，有助于深入理解Vue2源码的核心原理，从而显著提高前端开发技能。

Vue2源码执行路线图

+----------------+      +----------------------------------+      +----------------------------------+
|                |      |                                  |      |                                  |
|  new Vue(...)  +----->+  _init(options) 初始化Vue实例      +----->+  $mount(el) 挂载Vue实例到DOM      |
|                |      |                                  |      |                                  |
+----------------+      +----------------------------------+      +----------------------------------+
                                                                          |
                                                                          |
                                                                          v
                          +--------------------------------------------------+
                          |                                                  |
                          |  callHook('beforeMount') 触发beforeMount钩子      |
                          |                                                  |
                          +--------------------------------------------------+
                                    |
                                    |
                                    v
                          +--------------------------------------------------+
                          |                                                  |
                          |  compileToFunctions(template, options) 编译模板   | (仅在运行时编译时发生)
                          |                                                  |
                          +--------------------------------------------------+
                                    |
                                    |
                                    v
                          +--------------------------------------------------+
                          |                                                  |
                          |  _render() 生成虚拟DOM（VNode）                    |
                          |                                                  |
                          +--------------------------------------------------+
                                    |
                                    |
                                    v
                          +--------------------------------------------------+
                          |                                                  |
                          |  _update(vnode) 将虚拟DOM转换为真实DOM并挂载        |
                          |                                                  |
                          +--------------------------------------------------+
                                    |
                                    |
                                    v
                          +--------------------------------------------------+
                          |                                                  |
                          |  callHook('mounted') 触发mounted钩子              |
                          |                                                  |
                          +--------------------------------------------------+
                                    |
                                    |
                                    v
                          +--------------------------------------------------+
                          |                                                  |
                          |  setter 数据变更时触发响应式系统的更新流程            |
                          |                                                  |
                          +--------------------------------------------------+
                                    |
                                    |
                                    v
                          +--------------------------------------------------+
                          |                                                  |
                          |  dep.notify() 通知所有订阅者（Watcher）进行更新      |
                          |                                                  |
                          +--------------------------------------------------+
                                    |
                                    |
                                    v
                          +--------------------------------------------------+
                          |                                                  |
                          |  watcher.before() 在更新前调用                     |
                          |                                                  |
                          +--------------------------------------------------+
                                    |
                                    |
                                    v
                          +--------------------------------------------------+
                          |                                                  |
                          |  _render() 重新生成虚拟DOM，以反映最新的数据状态      |
                          |                                                  |
                          +--------------------------------------------------+
                                    |
                                    |
                                    v
                          +--------------------------------------------------+
                          |                                                  |
                          |  watcher.update() 触发更新回调                     |
                          |                                                  |
                          +--------------------------------------------------+
                                    |
                                    |
                                    v
                          +--------------------------------------------------+
                          |                                                  |
                          |  patch(oldVnode, vnode) 使用diff算法更新真实DOM     |
                          |                                                  |
                          +--------------------------------------------------+
                                    |
                                    |
                                    v
                          +--------------------------------------------------+
                          |                                                  |
                          |  callHook('updated') 触发updated钩子              |
                          |                                                  |
                          +--------------------------------------------------+

Vue2源码执行路线图功能描述

1. new Vue(...)

   • 创建一个新的 Vue 实例，并接收一个可选的配置对象 options。这个配置对象可以包含数据、模板、挂载点、方法、计算属性、观察者等。
2. _init(options)

   • 初始化 Vue 实例，这个方法是 Vue 构造函数的一个内部方法。它会进行一系列的初始化工作，包括设置数据观察、初始化事件、生命周期钩子、渲染函数等。
3. $mount(el)

   • 将 Vue 实例挂载到指定的 DOM 元素 el 上。如果实例没有指定 template 或 render 函数，它将尝试将挂载元素的 innerHTML 作为模板。
4. callHook('beforeMount')

   • 触发 beforeMount 生命周期钩子，在这个钩子函数中，组件实例刚刚完成初始化，挂载尚未开始。
5. compileToFunctions(template, options)

   • 将模板字符串编译成渲染函数。这个步骤仅在运行时编译时发生，通常在 .vue 文件中使用预编译。
6. _render()

   • 生成虚拟 DOM（VNode）。这个方法会调用组件的渲染函数，并返回一个虚拟节点树。
7. _update(vnode)

   • 将虚拟 DOM 转换为真实 DOM 并挂载到页面上。这是通过递归地将 VNode 节点转换为真实的 DOM 节点来完成的。
8. callHook('mounted')

   • 触发 mounted 生命周期钩子，在这个钩子函数中，组件已经挂载到 DOM 上，所有指令已绑定到元素。
9. setter

   • 当数据变更时，Vue 会使用 setter 来触发响应式系统的更新流程。这是通过在数据对象上设置访问器属性（getter/setter）来实现的。
10. dep.notify()

    • 通知所有订阅者（Watcher）进行更新。当数据变化时，依赖该数据的 Dep 实例会通知所有 Watcher 实例重新计算。
11. watcher.before()

    • 在更新前调用，这是 Watcher 实例的一个方法，用于在 DOM 更新之前执行一些操作。
12. _render()

    • 重新生成虚拟 DOM，以反映最新的数据状态。这是在数据变更后，响应式系统触发的重新渲染过程。
13. watcher.update()

    • 触发更新回调，这是 Watcher 实例的一个方法，用于执行实际的 DOM 更新操作。
14. patch(oldVnode, vnode)

    • 使用 diff 算法更新真实 DOM。这个方法会比较新旧虚拟 DOM，并只对变更的部分进行实际的 DOM 操作。
15. callHook('updated')

    • 触发 updated 生命周期钩子，在这个钩子函数中，组件的 DOM 已经更新，可以执行依赖于 DOM 的操作。

注：整理了Vue2源码学习路线思维导图，需要的请联系。

免费福利

有免费的程序员副业、公众号写作、接单互助等交流群，放心加，不做任何营销推荐，长按二维码加我好友拉你入群。

资源分享

整理技术类电子书、开发工具激活、开源项目（源码）等资源，在小程序可自行获取

小程序： 牛马圈分享

废话放最后

欢迎关注【牛马圈】，专注于技术知识分享的宝藏公众号！分享解决方案、高效工具，以及独家项目源码。有任何技术问题，都可添加我的微信好友，共同探讨交流。分享的资源在小程序里，需要观看广告后获取，如不喜欢这种方式，也可添加我的微信好友直接获取。希望持续关注，持续受益。特别声明：牛马一词不带有任何贬义

喜欢记得点赞哦！

本文由 mdnice 多平台发布