vue组件的生命周期与hook执行顺序

// https://github.com/vuejs/vue/blob/dev/src/core/instance/init.js
// 截一段相对关键的代码，加上简单的注释
// @function initMixin
vm._self = vm
initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
initInjections(vm) // resolve injections before data/props
initState(vm)
initProvide(vm) // resolve provide after data/props
callHook(vm, 'created')

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

// 1. initLifecycle (src/core/instance/lifecycle.js)
// @function initLifecycle
export function initLifecycle (vm: Component) {
  const options = vm.$options

  // 建立父子组件的关系
  let parent = options.parent
  if (parent && !options.abstract) {
    // 对于抽象的组件，不断往上找父组件，找到不是抽象的父组件为止
    while (parent.$options.abstract && parent.$parent) {
      parent = parent.$parent
    }
    parent.$children.push(vm)
  }

  // balabala 初始化很多数据
  vm.$parent = parent
  vm.$root = parent ? parent.$root : vm

  vm.$children = []
  vm.$refs = {}

  vm._watcher = null
  vm._inactive = null
  vm._directInactive = false
  vm._isMounted = false
  vm._isDestroyed = false
  vm._isBeingDestroyed = false
}

// 2. initEvents (src/core/instance/events.js)
// @function initEvents
export function initEvents (vm: Component) {
  vm._events = Object.create(null)
  vm._hasHookEvent = false
  // init parent attached events
  // 初始化组件监听的事件
  const listeners = vm.$options._parentListeners
  if (listeners) {
    updateComponentListeners(vm, listeners)
  }
}


// 3. initRender (src/core/instance/render.js)
// @function initRender
// 中间去掉一些声明变量，主要保留一些赋值到vm的数据
export function initRender (vm: Component) {
  vm._vnode = null // the root of the child tree
  vm._staticTrees = null // v-once cached trees

  //...
  // 赋值 slot 的值与对应的 slot 对应的数据
  vm.$slots = resolveSlots(options._renderChildren, renderContext)
  vm.$scopedSlots = emptyObject

  //...
  // 赋值从组件传过来的属性值与没有显式被组件监听的事件，分别赋值到$attr与$listener
  /* istanbul ignore else */
  if (process.env.NODE_ENV !== 'production') {
    defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, () => {
      !isUpdatingChildComponent && warn(`$attrs is readonly.`, vm)
    }, true)
    defineReactive(vm, '$listeners', options._parentListeners || emptyObject, () => {
      !isUpdatingChildComponent && warn(`$listeners is readonly.`, vm)
    }, true)
  } else {
    defineReactive(vm, '$attrs', parentData && parentData.attrs || emptyObject, null, true)
    defineReactive(vm, '$listeners', options._parentListeners || emptyObject, null, true)
  }
}

// 1. initInjections (src/core/instance/inject.js)
// @function initInjections
export function initInjections (vm: Component) {
  // 拿到注入的数据
  const result = resolveInject(vm.$options.inject, vm)
  if (result) {
    // 标识inject的属性与方法在当前组件不需要成为 observer，不用监听变化进行响应
    toggleObserving(false)
    Object.keys(result).forEach(key => {
        // ...
        // 绑定注入的数据到当前组件
        defineReactive(vm, key, result[key])
    })

    // 把 observer 的标识位置为 true
    toggleObserving(true)
  }
}

// 2. initState (src/core/instance/state.js)
// @function initState
export function initState (vm: Component) {
  // 初始化依赖的props，methods
  vm._watchers = []
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props)
  if (opts.methods) initMethods(vm, opts.methods)
  // 初始化 data
  if (opts.data) {
    initData(vm)
  } else {
    observe(vm._data = {}, true /* asRootData */)
  }
  // 初始化计算属性
  if (opts.computed) initComputed(vm, opts.computed)
  // 初始化 watch 的数据
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}

// 3. initProvide (src/core/instance/inject.js)
// @function initProvide
export function initProvide (vm: Component) {
  const provide = vm.$options.provide
  if (provide) {
   // 对 provide 是函数的情况，执行函数赋值到 _provided；否则直接赋值
    vm._provided = typeof provide === 'function'
      ? provide.call(vm)
      : provide
  }
}

// 忽略已分析代码
callHook(vm, 'created')
// ... 
if (vm.$options.el) {
  vm.$mount(vm.$options.el)
}

// 定义挂载组件的方法
// mountComponent (src/core/instance/lifecycle.js)
// @function mountComponent
export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  vm.$el = el
  // 没有 render 函数
  if (!vm.$options.render) {
    vm.$options.render = createEmptyVNode
    // ...
  }
  // 触发 beforeMount hook 函数
  callHook(vm, 'beforeMount')

  // ...
  // 定义数据发生变化的回调方法
  updateComponent = () => {
    // 调用该方法更新当前的组件，执行完毕之后，需要通过 scheduler 来触发 updated 的 hook，为什么不是马上触发hook，是因为需要保证子组件都更新了，才调用当前组件的 updated，详细可以看一下源码，位置如下
    // src/core/instance/lifecycle.js 
    // @function Vue.prototype._update
    vm._update(vm._render(), hydrating)
  }

  // we set this to vm._watcher inside the watcher's constructor
  // since the watcher's initial patch may call $forceUpdate (e.g. inside child
  // component's mounted hook), which relies on vm._watcher being already defined
  // 新建一个 watcher，用来监听数据发生变化
  // 注意 beforeUpdate 的hook也是在这里进行监听调用
  new Watcher(vm, updateComponent, noop, {
    // 在执行 updateComponent 之前先执行 before 函数，也就是触发 beforeUpdate
    before () {
      if (vm._isMounted && !vm._isDestroyed) {
        callHook(vm, 'beforeUpdate')
      }
    }
  }, true /* isRenderWatcher */)
  hydrating = false

  // manually mounted instance, call mounted on self
  // mounted is called for render-created child components in its inserted hook
  // 挂载的对象如果不是为空，则触发 mounted 回调方法
  if (vm.$vnode == null) {
    vm._isMounted = true
    callHook(vm, 'mounted')
  }
  return vm
}

// src/core/instance/lifecycle.js
// @function Vue.prototype.$destroy
Vue.prototype.$destroy = function () {
  const vm: Component = this
  if (vm._isBeingDestroyed) {
    return
  }
  // 触发 beforeDestroy 的 hook
  callHook(vm, 'beforeDestroy')
  vm._isBeingDestroyed = true
  // remove self from parent
  // 移除父组件与当前组件的关系
  const parent = vm.$parent
  if (parent && !parent._isBeingDestroyed && !vm.$options.abstract) {
    remove(parent.$children, vm)
  }
  // teardown watchers
  // 移除所有watcher
  if (vm._watcher) {
    vm._watcher.teardown()
  }
  let i = vm._watchers.length
  while (i--) {
    vm._watchers[i].teardown()
  }
  // remove reference from data ob
  // frozen object may not have observer.
  if (vm._data.__ob__) {
    vm._data.__ob__.vmCount--
  }
  // call the last hook...
  vm._isDestroyed = true
  // invoke destroy hooks on current rendered tree
  // 移除 vnode 内容
  vm.__patch__(vm._vnode, null)
  // fire destroyed hook
  callHook(vm, 'destroyed')
  // turn off all instance listeners.
  vm.$off()
  // remove __vue__ reference
  if (vm.$el) {
    vm.$el.__vue__ = null
  }
  // release circular reference (#6759)
  if (vm.$vnode) {
    vm.$vnode.parent = null
  }
}

import router from 'router' // vue-router object
export default {
    beforeRouteEnter (to, from, next) {
        console.log('beforeRouteEnter')
        requestPermission().then(allowAccessed => {
            if (allowAccessed) {
                next(vm => {
                    console.log('beforeRouteEnter next')
                    vm.allow = true
                })
            } else {
                router.push({ name: 'homepage' })
            }
        })
    }
}