Vue首次渲染过程

11,824 阅读5分钟

最近在学习Vue源码,然后主要是对Vue的首次渲染做一个总结~

首先来看下图把,接下来会一步一步讲解

Vue源码地址,这里主要看src目录下面的源码

一、从入口文件开始

定义在 src/platform/web/entry-runtime-with-compiler.js

二、Vue初始化过程

1.首先取出Vue的$mount,对$mount进行重写,给$mount增加新的功能

// src/platform/web/entry-runtime-with-compiler.js
// 保留 Vue实例的 $mount 方法
const mount = Vue.prototype.$mount
Vue.prototype.$mount = function (
  el?: string | Element,
  // 非ssr情况下的为false, ssr时候为true
  hydrating?: boolean
): Component {
  // 获取el对象
  el = el && query(el)
  ...
}

2.判断是否有render选项,如果没有render选项,则会把模版template取出,把模版编译成render函数,接着调用mount方法,渲染DOM

3.给Vue增加了一个静态的compile方法,作用是把HTML字符串编译成render函数

if (!options.render) {
  let template = options.template
    if (template) {
      ...
    }
}

Vue.compile = compileToFunctions
export default Vue

4.这个文件主要是通过extend给Vue全局注册了指令和组件,组件是TransitionTransitionGroup,指令是v-modelv-show,接着在Vue的原型上注册了 _patch_ 函数, _patch_ 函数作用是将虚拟DOM转换成真实DOM,在给patch函数赋值的时候会判断是否是浏览器环境 5 我们继续找Vue的构造函数

// src/platforms/web/runtime/index.js

extend(Vue.options.directives, platformDirectives)
extend(Vue.options.components, platformComponents)

// 判断是否是浏览器环境
Vue.prototype.__patch__ = inBrowser ? patch : noop

初始化静态成员

6.定义在src/core/index.js

  • 在这个文件中调用initGlobalAPI(Vue)方法,给Vue的构造函数增加静态方法
initGlobalAPI(Vue)

7.initGlobalAPI(Vue) 定义在src/core/global-api/index.js

  • 初始化Vue.config对象
  • 设置keep-alive 组件
  • 注册Vue.use()用来注册插件
  • 注册Vue.mixin()实现混入
  • 注册Vue.extend()基于传入的options返回一个组件的构造函数
  • 注册Vue.directive(), Vue.component(), Vue.filter
export function initGlobalAPI (Vue: GlobalAPI) {
  const configDef = {}
  configDef.get = () => config
  if (process.env.NODE_ENV !== 'production') {
    configDef.set = () => {
      warn(
        'Do not replace the Vue.config object, set individual fields instead.'
      )
    }
  }
  // 初始化 Vue.config对象
  Object.defineProperty(Vue, 'config', configDef)
  // exposed util methods.
  // NOTE: these are not considered part of the public API - avoid relying on
  // them unless you are aware of the risk.
  // 这些工具方法不视作全局Api的一部分,除非你已经意识到某些风险,否则不要去依赖他们
  Vue.util = {
    warn,
    extend,
    mergeOptions,
    defineReactive
  }
  // 静态方法 set/delete/nextTick
  Vue.set = set
  Vue.delete = del
  Vue.nextTick = nextTick
  // ...
  Vue.options._base = Vue
  // 设置keep-alive 组件
  extend(Vue.options.components, builtInComponents)
  // 注册Vue.use()用来注册插件
  initUse(Vue)
  // 注册Vue.mixin()实现混入
  initMixin(Vue)
  // 注册Vue.extend()基于传入的options返回一个组件的构造函数
  initExtend(Vue)
  // 注册Vue.directive(), Vue.component(), Vue.filter
  initAssetRegisters(Vue)
}

初始化实例成员

  1. _init()
  • 定义在src/core/instance/index.js
  • 定义了构造函数,调用了this._init(options)方法
  • 给Vue中混入了常用的实例成员
function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  // 调用 _init()方法
  this._init(options)
}
// 注册vm的_init()方法, 初始化vm
initMixin(Vue)
// 注册vm 的$data/$props/$set/$delete/$watch
stateMixin(Vue)
// 初始化事件相关方法
//$on/$once/$off/$emit
eventsMixin(Vue)
// 初始化生命周期相关的混入方法
// _update/$forceUpdate/$destroy
lifecycleMixin(Vue)
// 混入 render
// $nextTick/_render
renderMixin(Vue)

export default Vue

初始化实例成员 init()

  • 当静态成员和实例成员都初始化完成之后,接着调用Vue的构造函数,在构造函数中调用_init()方法
  • _init是在initMixin中初始化的,主要对Vue实例初始化
// vm的生命周期相关变量初始化
initLifecycle(vm)
// vm的事件监听初始化,父组件绑定在当前组件上的事件
initEvents(vm)
// vm的编译render初始化
// $slots/$scopedSlots/_c/$createElement/$attrs/$listeners
initRender(vm)
// beforeCreate 生命钩子的回调
callHook(vm, 'beforeCreate')
// 把inject的成员注入到vm上
initInjections(vm) // resolve injections before data/props
// 初始化vm的 _props/methods/_data/computed/watch
initState(vm)
// 初始化provide
initProvide(vm) // resolve provide after data/props
// created 生命钩子回调
callHook(vm, 'created')

初始化实例成员 initState()

初始化vm的 _props/methods/_data/computed/watch

export function initState (vm: Component) {
  vm._watchers = []
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props)
  if (opts.methods) initMethods(vm, opts.methods)
  if (opts.data) {
    initData(vm)
  } else {
    observe(vm._data = {}, true /* asRootData */)
  }
  if (opts.computed) initComputed(vm, opts.computed)
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}
  • instance/state.js中,首先获取了Vue实例中的$options,然后判断options中是否有props,methods,data以及computedwatch这些属性,如果有的话,通过initProps进行初始化 initProps(vm, opts.props)接收了两个参数,一个是Vue实例,一个是Props属性,我们跳转到initProps函数中,首先给Vue实例定义了一个_Props对象, 并且把它存储到了常量里面

    const props = vm._props = {}
    
  • 紧接着,开始遍历PropsOptions的所有属性,它其实就是initProps方法中的第二个参数,遍历每个属性,然后通过defineReactive注入到Props这个对象上,这个props其实就是vm._props所有的成员都会通过defineReacttive转化为getset,最后在Props对象上存储, 注意

  • 在开发模式中,如果我们直接给这个属性赋值的话,会发出一个警告,

  • 生产环境中直接通过defineReactiveprops中的属性转化成getset

  • 最后判断了props属性是否在Vue实例中存在,不存在通过Proxy这个函数把我们的属性注入到Vue的实例中

  • Proxy中,通过调用Object.defineProperty(target, key,sharePropertyDefinition)

总结

initProps的作用就是把我们的Props成员转化成响应式数据,并且注入到Vue实例里面中

initMethods

  • initMethods(vm, opts.methods)中,也是接收两个参数,Vue实例和选项中的methods,首先获取了选项中的Props,接着遍历methods所有属性,接着判断当前的环境是否是开发或者生产 开发环境会判断methods是否是functicon

  • 接着判断methods方法的名称是否在Props对象中存在,存在就会发送一个警告,警告在属性在Props中已经存在,因为Propsmethods最终都要注入到Vue实例上,不能出现同名

  • 下面继续判断key是否在Vue中存在,并且调用了isReserved(key),判断我们的key是否以_开头或$开头 最后把methods注入到Vue实例上来,注入的时候会判断是否是function,如果不是返回noop,是的话把函数返回bind(methods[key], vm)

总结

initMethods作用就是把选项的methods注入到vue实例,在注入之前,会先判断我们命名是否在Props中存在,并且判断了命名的规范,不建议_和$开头

initData(vm)

  • options中有data选项时,会调用initData(vm)

  • 当没有的时候此时会给vm初始化一个_data属性observe(vm._data = {}, true)然后调用observe函数,observe是响应式中的一个函数

  • initData中获取了optionsdata选项,判断了data选项是否是function,如果是调用getData(data,vm) 接着获取data中的所有属性,同时获取了props,methods中所有的属性

// src/core/instance/state.js
const keys = Object.keys(data)
const props = vm.$options.props
const methods = vm.$options.methods

最后做一个响应式处理

observe(data, true)

在_init函数的最后,又调用了$mount来挂载整个页面

// src/core/instance/init.js

if (vm.$options.el) {
  vm.$mount(vm.$options.el)
}

首次渲染过程总结

  • 在首次渲染之前,首先进行Vue初始化,初始化实例成员和静态成员
  • 当初始化结束之后,要调用Vue的构造函数new Vue(),在构造函数中调用了_init()方法,这个方法相当于我们整个Vue的入口
  • _init方法中,最终调用了$mount,一共有两个$mount,第一个定义在entry-runtime-with-compiler.js文件中,也就是我们的入口文件$mount,这个$mount()的核心作用是帮我们把模板编译成render函数,但它首先会判断一下当前是否传入了render选项,如果没有传入的话,它会去获取我们的template选项,如果template选项也没有的话,他会把el中的内容作为我们的模板,然后把模板编译成render函数,它是通过compileToFunctions()函数,帮我们把模板编译成render函数的,当把render函数编译好之后,它会把render函数存在我们的options.render中。
  • 接着会调用src/platforms/web/runtime/index.js文件中的$mount方法,在这个中首先会重新获取el,因为如果是运行时版本的话,是不会走entry-runtime-with-compiler.js这个入口中获取el,所以如果是运行时版本的话,我们会在runtime/index.js的$mount()中重新获取el。
  • 接下来调用mountComponent(),这个方法在src/core/instance/lifecycle.js中定义的,在mountComponent()中,首先会判断render选项,如果没有render选项,但是我们传入了模板,并且当前是开发环境的话会发送一个警告,目的是如果我们当前使用运行时版本的Vue,而且我们没有传入render,但是传入了模版,告诉我们运行时版本不支持编译器。接下来会触发beforeMount这个生命周期中的钩子函数,也就是开始挂载之前。
  • 然后定义了updateComponent(),在这个函数中,调用vm._rendervm._updatevm._render的作用是生成虚拟DOM,vm._update的作用是将虚拟DOM转换成真实DOM,并且挂载到页面上
  • 创建Watcher对象,在创建Watcher时,传递了updateComponent这个函数,这个函数最终是在Watcher内部调用的。在Watcher内部会用了get方法,当Watcher创建完成之后,会触发生命周期中的mounted钩子函数,在get方法中,会调用updateComponent()
  • 挂载结束,最终返回Vue实例。

以上就是Vue首次渲染的过程

感谢大家

最后感谢您花宝贵的时间阅读这篇内容,如果你觉得这篇内容对你有帮助的话,就给本文点个赞吧, (感谢掘友的鼓励与支持🌹🌹🌹)

本文使用 mdnice 排版