Vue 的首次渲染的过程

最新推荐文章于 2025-10-10 05:00:40 发布

原创最新推荐文章于 2025-10-10 05:00:40 发布 · 379 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #源码

Vue 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了Vue 2.6.10版本的初始化过程，包括构造函数中的_init方法、$mount()方法的双重作用，以及在mountComponent()中的关键步骤。重点讲解了如何从模板生成render函数，虚拟DOM的创建与更新，以及Watcher对象的创建。文章深入剖析了Vue实例从初始化到挂载到页面上的完整生命周期。

Vue版本：2.6.10

首先进行Vue的初始化，初始化Vue的实例成员和静态成员
调用构造函数中的_init()方法，作为整个Vue的入口
在_init()中调用$mount()方法：
- 第一个$mount()：在入口文件entry-runtime-with-compiler.js中。其核心作用是将模板（按照传入render>template>el的优先级作为模板）用compileToFunction()编译成render函数并存储在option.render中
- 第二个$mount()：在runtime/index.js中。运行时版本不会走第一个mount()，所以仅会在这里中获取el
调用mountComponent()，src/core/instance/lifecycle.js中定义
1. 判断render选项，若运行时版本&没有render&传入了模板，会警告运行时版本不支持编译器
2. 触发beforeMount()
3. 定义updateComponent()，该方法中调用了两个方法：
  - _rende()：调用了render.call(vm._renderProxy,vm$createElement)将用户传入的render()或者自己编译生成的render()生成的虚拟DOM返回
  - _update()：调用了__patch__(vm.$el,vnode)将虚拟DOM转换成真实DOM，并且挂载到页面上；将生成的真实DOM记录到vm.$el中。
4. 创建Watcher对象。创建时传递了updateComponent()并在内部调用get()时调用了updateComponent()
5. 触发mounted()
6. return vm