Vue2核心原理（简易）——生命周期初次实现+Vue.mixin笔记

前言

本章节项目的地址为：https://github.com/esnext/es6-next-vue-code/tree/master/src/chapter01

正文

示范

以beforeCreate为例，在new实例时，会将所有beforeCreate(可能包含多个，例如Vue.mixin)放入一个数组当中，在其数据初始化前循环调用。

生命周期是在某个时刻就将其调用。

constructor (options) {
  if (__DEV__) {
    if (options && (options.pre || options.post)) {
      warn$1(
        'The `pre` and `post` hooks will be deprecated in Vue 2.0. Use `created` and `beforeDestroy` instead.'
      )
    }
  }

  this.tag = options && options.tag
  // determine whether a user is using async syntax
  this._isVue = true
  // vue-router scope vm
  if (process.env.NODE_ENV !== 'production' &&
    isVueClassComponent(componentOptions)) {
    setFunctionalComponentOption(componentOptions, '$attrs', attrs)
  }
  // runtime constructor
  if (process.env.NODE_ENV !== 'production') {
    initProxy(this)
  } else {
    this._renderProxy = this
  }
  // expose key, which is forced to be a non-string primitive value
  this._k = options && options.key
  // use public property so that it won't be overwritten
  this.$el = undefined
  // core properties
  this.$data = options && options.data
  this._props = options && options.props
  this._propsData = options && options.propsData
  this._computedWatchers = options && options.computedWatchers
  this._dataObservers = []
  this._computedListeners = {}
  this._watchers = []
  // pure state properties
  this._isMounted = false
  this._isDestroyed = false
  this._isBeingDestroyed = false

  // **全局生命周期beforeCreate** 
  callHook(this, 'beforeCreate')

  // 对组件内部进行初始化处理，例如事件冒泡
  initRender(this)

  // 对组件进行挂载
  callHook(this, 'created')

  // 对组件的插槽进行处理，例如动态加载组件
  initInjections(componentOptions)

  // 调用installPlugin方法
  if (componentOptions.devtools) {
    initDevtools(componentOptions)
  }

  // 调用installPlugin方法
  if (__DEV__) {
    if (componentOptions.productionTip !== false &&
      !componentOptions._isComponent &&
      // avoid repeated warnings when compilation mode is disabled (#4451)
      !compilerOptions.isCompiled
    ) {
      warn$1(
        `This instance is not mounted, make sure to call ` +
        `vm.$mount() before rendering elements or trying to access ` +
        `element properties.`
      )
    }
  }

  // 处理异步组件问题
  if (process.env.NODE_ENV !== 'production' &&
    config.performance &&
    mark) {
    mark('vue-perf-start')
  }

  // 对组件内部进行初始化处理，例如事件冒泡
  initLifecycle(this)

  // 对组件的插槽进行处理，例如动态加载组件
  initEvents(this)

  // 对组件内部进行初始化处理，例如事件冒泡
  callHook(this, 'mounted')

  // 对组件的插槽进行处理，例如动态加载组件
  if (process.env.NODE_ENV !== 'production' &&
    config.performance &&
    mark) {
    mark('vue-perf-end')
    measure(`vue ${componentOptions._name} init`, 'vue-perf-start', 'vue-perf-end')
  }
}

Vue.mixin

Vue.mixin是Vue的一个特性，允许您在各个组件之间共享可复用功能。它可以让你定义一个包含组件行为的JavaScript对象，然后将该对象混入到其他组件中。

Vue.mixin({
  beforeCreate: function () {
    // 这里定义的钩子函数将被混入到所有使用此mixin的组件中
  }
})

总结

本文介绍了Vue2的生命周期初次实现，重点讲解了beforeCreate生命周期钩子的实现原理，以及Vue.mixin的使用方法。通过本文，读者将对Vue2的生命周期有更深入的了解，并能够熟练使用Vue.mixin来实现代码重用。