Vue2.6.x源码阅读 - 5.源码阅读-core-Vue构造函数

阅读学习Vue源码/src目录下的core文件夹内Vue构造函数相关的代码

Vue构造函数

  • core目录下的index.js对Vue构造函数依旧进行了一定程度的封装，先除开封装的内容，直接进入到Vue真正的构造函数所在的位置src/core/instance/index.js。

    /* Vue 构造函数 */
function Vue (options) {
  // 入参 options 即为开发者new一个Vue实例时，Vue中传入的带有data、method、watch等属性的对象，在日常代码中，直接使用 this 指代。
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue) // 判断是否通过 new 调用 Vue 构造函数
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options) // 初始化 Vue 实例，方法定义于 Vue 的 prototype 中
}

initMixin(Vue) // 混入初始化方法，构造函数中的 Vue.prototype._init()方法来自于其中
stateMixin(Vue) // 混入 状态处理 的方法
eventsMixin(Vue) // 混入 事件 的方法
lifecycleMixin(Vue) // 混入 生命周期 的方法
renderMixin(Vue) // 混入 渲染相关 的方法

export default Vue

  • ⭐️ 构造函数所在的文件(src/core/instance/index.js)内容较少，但需要注意各个方法的执行顺序。构造函数在实际样例代码调用new Vue(options)才会执行，各类Mixin方法都先于构造函数执行，这些方法将包括prototype方法、状态处理、事件、生命周期、渲染相关的方法都预先写入至构造函数内，所以在实际调用构造方法时，Vue实例内容已经具有一定的复杂程度。

  • 当然实例所挂载的内容也不仅限于src/core/instance/index.js文件，其外层的src/core/index.js以及再外层的src/platforms/web/runtime/index.js也同样进行了一定程度的挂载。从入口文件开始到构造函数，一个Vue实例经过了三层的封装。最外层的封装其实能够理解，是基于平台入口的不同而会存在挂载内容的区别。中层与内层的挂载内容区分依旧比较费解，初步认为是处于代码结构的考虑，需要更加深入的学习。

initMixin

  • 回到构造函数，进入到含有初始化方法的initMixin()，由于方法较长，所以按顺序分别进行分析。

    1. 初始化定义

      // src/core/instance/init.js
let uid = 0 // 每个类型的实例(组件)都含有的唯一标识，在vue-cli脚手架下，每个Vue文件就是一个单独的uid，可以通过this._uid获取。
export function initMixin (Vue: Class<Component>) {
 /* 挂载初始化方法至prototype，用于构造函数调用 */
 Vue.prototype._init = function (options?: Object) {
   /* 定义Vue实例 */
   const vm: Component = this
   // a uid
   vm._uid = uid++

   // continued...
 }
}

    2. 性能测试，development模式下，可开启core/config.js中的性能分析配置performance: true以测试各个Vue组件在初始化阶段的性能表现。

      • 在这里也可以看出core/config.js这份文件用于更改Vue内部的一些配置，这些配置不开放给实际开发者，但支持开发者更改在调试时使用。

      • 这段代码中有一处非代码逻辑的细节，可以看到有一些istanbul开头的注释，如/* istanbul ignore if */。istanbul为一个用于检查代码覆盖率的JavaScript库。在不开启性能分析配置的情况下，性能测试相关的两个if-else代码块无法被覆盖到，故加了这一段注释用于忽略覆盖率检测。扩展：如果需要忽略整个文件，可在文件开头增加/* istanbul ignore next */实现。

      export function initMixin (Vue: Class<Component>) {
 Vue.prototype._init = function (options?: Object) {
   // ...

   // 性能测试时使用
   let startTag, endTag
   /* istanbul ignore if */
   if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
     // 非生产模式、且开启性能分析配置config.performance后进入到此
     // 根据_uid定义开始与结束两个唯一标识
     startTag = `vue-perf-start:${vm._uid}`
     endTag = `vue-perf-end:${vm._uid}`
     mark(startTag) // 通过window.performance.mark()方法记录组件初始化的开始时点
   }

   // ...

   /* istanbul ignore if */
   if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
     vm._name = formatComponentName(vm, false) // 格式化组件名称
     mark(endTag) // 记录组件初始化的结束时点
     measure(`vue ${vm._name} init`, startTag, endTag) // 计算组件初始化消耗的时间，并清空mark的时点
   }

   // continued...
 }
}

      • 另一个关于代码顺序的细节，我们可以发现片段一的定义的代码内容是很少的，除了需要在性能分析中使用的变量，均未在片段一内进行处理。可以合理猜测这里的处理是为了让初始化阶段的性能更加精确。结合下面片段三的内容，也可以得出当前初始化方法内的性能，是用于测试实例创建，至生命周期created为止所消耗的时间。

      • 通过performance API可以获取到Vue源码所记录的性能记录。

    3. options合并。else部分的合并逻辑中，可以发现vm.constructor.options内部是有内容的，甚至已经挂载了KeepAlive等组件，以及一些命令。构造函数自带的options就来自于上文所述的入口文件的多层封装。

      export function initMixin (Vue: Class<Component>) {
 Vue.prototype._init = function (options?: Object) {
   // ...

   // a flag to avoid this being observed
   vm._isVue = true
   // merge options
   if (options && options._isComponent) {
     // 内部组件 internal component，由VNode构成的组件，使用于render方法内，用createElement或jsx语法构建
     // optimize internal component instantiation
     // since dynamic options merging is pretty slow, and none of the
     // internal component options needs special treatment.
     initInternalComponent(vm, options)
   } else {
     // 一般组件合并当前组件options与构造函数自带的options
     vm.$options = mergeOptions(
       resolveConstructorOptions(vm.constructor),
       options || {},
       vm
     )
   }
   // continued...
 }
}

    4. 丰富Vue实例内容，赋值各类属性，以及生命周期方法beforeCreate、created的调用。initProxy部分可参考学习。

      export function initMixin (Vue: Class<Component>) {
 Vue.prototype._init = function (options?: Object) {
   // ...

   // 开发环境下赋值 _renderProxy属性
   // 在生产环境或不支持Proxy的环境下，直接将实例本身赋值给该属性
   // 在 $option.render._withStripped 属性为true时，将启用Proxy，使用其中的 getHandler(自定义对象get方法) 以及 hasHandler(自定义对象in方法)
   // Proxy在Vue3中才大范围开始使用，在这里主要用于开发环境下，起到警告提示作用
   /* istanbul ignore else */
   if (process.env.NODE_ENV !== 'production') {
     initProxy(vm)
   } else {
     vm._renderProxy = vm
   }
   // expose real self
   // 实例本身赋值至 _self
   vm._self = vm

   // 初始化一些重要属性，包括 $refs | $children | $parent | $root
   // 初始化生命周期的一些状态变量
   initLifecycle(vm)
   initEvents(vm) //初始化事件的容器 events ｜ listeners
   initRender(vm) //初始化渲染标记用到的变量以及创建元素的方法
   callHook(vm, 'beforeCreate') // 调用beforeCreate生命周期函数
   initInjections(vm) // resolve injections before data/props 初始化注入器
   initState(vm) // ⭐️初始化状态数据，处理 data ｜ props | watch | computed | method
   initProvide(vm) // resolve provide after data/props
   callHook(vm, 'created') // 调用created生命周期函数

   // continued...
 }
}

      • 通过观察初始化各类属性的方法以及beforeCreate、created两个生命周期方法的顺序，可以知道data、props、injects、provides等数据属性在created时候已经被创建，且存在内容。而此时与dom相关的属性依旧为空状态。

      • 关于实例的属性，带$符号以及下划线的属性一般都为实例的私有属性，而带$符号的属性一般认为为只读属性。

      • 关于initRender方法注释中所说的“创建元素的方法”即createElement，将VNode转换为真实的的dom，也是自定义render方法中的第一个参数。经常能够在那些可自定义dom的组件中使用到。

    5. ⭐️调用mount方法挂载组件。

      export function initMixin (Vue: Class<Component>) {
 Vue.prototype._init = function (options?: Object) {
   // ...
   // vm.$options.el 存在的情况下调用 mount 方法
   if (vm.$options.el) {
     vm.$mount(vm.$options.el)
   }
   // 无el情况下可手动调用$mount方法
   // let vm = new Vue(...)
   // vm.$mount(...)
   // 先调用platform下的扩展的 $mount 方法，生成render
   // 再调用原始的 $mount 方法，获取元素
   // 再调用 mountComponent 方法
 }
}

      • 可以发现构造函数所在的文件并没有该方法的定义，但$mount方法又充满了既视感。该方法会根据platform不同会有所区别，结合web模式下入口文件中的内容(可见上一篇4.源码阅读-platform)可知，该方法已经挂载在Vue.prototype上。而代码内容由运行模式决定(该方法于6.源码阅读-core-组件挂载进行解析)。

    6. 关于4中代码的initState方法，这里进行一定的展开。以下代码中提及的observe与defineReactive方法于7.源码阅读-core-响应式原理中解析

      export function initState (vm: Component) {
 vm._watchers = []
 const opts = vm.$options
 // 初始化 options.props，通过defineReactive方法响应式化props
 if (opts.props) initProps(vm, opts.props)
 // 初始化 options.methods，method不需要响应式化，仅遍历method，进行属性判重，不与prop重复，并通过bind方法将method绑定至Vue实例(this)上。
 if (opts.methods) initMethods(vm, opts.methods)
 if (opts.data) {
   // 初始化 options.data，
   // 在Vue实例中，data为Object，而在组件中，data为Function
   // 判重处理，不与prop、method重复
   initData(vm)
 } else {
   // 空data时同样建立observer监听数据
   observe(vm._data = {}, true /* asRootData */)
 }
 // 初始化 options.computed，通过watcher监听computed数据，prop、data判重处理
 if (opts.computed) initComputed(vm, opts.computed)
 // 初始化 options.watch
 if (opts.watch && opts.watch !== nativeWatch) {
   initWatch(vm, opts.watch)
 }
}
上一页Vue2.6.x源码阅读 - 1.准备工作下一页Vue2.6.x源码阅读 - 7.源码阅读-core-响应式原理

最后更新于

这有帮助吗？