vue源码之首次渲染过程详解

首次渲染

src/core/instance/index.js 中的 this._init方法

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

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

在这里插入图片描述

在这里插入图片描述

首次渲染过程

vue初始化实例成员静态成员
new Vue()
this._init()
vm.$mount() - src/platforms/web/entry-runtime-with-compiler.js
- 如果没有传递render，把模版编译成render函数
- compileToFunctions()生成render()渲染函数
- options.render = render
vm.$mount() runtime/index中定义的 $mount 最终调用了mountComponent函数
mountComponent(this,el) - src/core/instance/lifecycle.js
- 判断是否有render选项，如果没有但是传入了模版，并且当前是开发环境的话会发送警告
- 触发beforeMount
- 定义 updateComponent
- 创建watcher实例
- 触发mounted
- return vm
watcher.get()
- 创建完watcher之后会调用一次get
- 调用updateComponent函数
- 调用 vm._render函数创建VNode
  - 调用render.call(vm._renderProxy, vm.$createElement)
  - 调用实例化时vue传入的render 函数
  - 或者编译template生成的render
  - 返回vnode
- 调用vm._update内部调用vm.__patch__方法挂载真实dom 记录 vm.$el