Vue 生命周期详解

1.new Vue()
2.初始化配置,初始化实例属性options、parent、refs、events等

  _init(options)
         vm.$options = mergeOptions(
            resolveConstructorOptions(vm.constructor),
            options || {},
          )
        initLifecycle(vm)
            vm.$parent = vm.$options.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
            
        initEvents(vm)
            vm._events = Object.create(null)
            vm._hasHookEvent = false
            
        initRender(vm)
            // functional静态组件 和 正常组件的解析，生成Vnode
            vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false)
            vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true)

3. beforCreate执行
        callHook(vm, 'beforeCreate')
        
4. 获取inject属性并响应式转化  

  initInjections(vm) // resolve injections before data/props  初始化inject属性并响应式转化
        initState(vm)
            initProps(vm, opts.props)  // 初始化props属性转化为响应式，并代理到vue实例对象
                defineReactive(props, key, value)
                proxy(vm, `_props`, key)
            initMethods(vm, opts.methods) //初始化metheds
            initData(vm)  //初始化data属性转化为响应式，并代理到vue实例对象
            initComputed(vm, opts.computed) //初始化computed,并创建每个计算属性的warcher实例对象存入_computedWatchers对象，并响应式处理
                 watchers[key] = new Watcher(
                    vm,
                    getter || noop,
                    noop,
                    computedWatcherOptions = { lazy: true }
                  )
                  defineComputed //初始化计算属性的并代理到vue实例对象
            initWatch(vm, opts.watch) //初始化watcher
            
       initProvide(vm) // resolve provide after data/props //初始化provide

         
5. created执行        
        callHook(vm, 'created')
     
6. 编译模板template 生成render()函数
        compileToFunctions  编译模板template 生成render()函数
        
7. beforMount执行        
        
8. 执行_render()生成VNode,并更新渲染到页面
    vm._render()     //    执行_render()生成VNode
    vm._update(Vnode) //对比VNode并编译成HTML代码，替换到页面
        vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false)   //不存在旧的VNode
        vm.$parent.$el = vm.$el
    
9. mounted执行    
    callHook(vm, 'mounted')    
    
7.change data 触发notify()派发更新，将所有的依赖函数添加到队列

    
8. beforeUpdate执行
    callHook(vm, 'beforeUpdate')

9. 执行依赖函数，重新调用render函数生成VNode,比较VNode与旧的VNode并更新VNode,并更新渲染到页面
    watcher.run()    
    vm._render()     //    执行_render()生成VNode
    vm._update(Vnode) //对比VNode并编译成HTML代码，替换到页面
        vm.$el = vm.__patch__(prevVnode, vnode)  //存在旧的VNode
        vm.$el.__vue__ = vm;
    
10. updated执行
    callHook(vm, 'beforeUpdate')    
    
11. 手动触发销毁 app.$destroy();

12. beforeDestroy执行
    vue 实例销毁前调用，可用于销毁定时器，解绑全局时间 销毁插件对象等

13. destroyed执行
    Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

activate：组件被激活的状态下使用的生命周期钩子

deactivated：组件停止使用时调用

        只有组件在<keep-alive>内被切换时，才有activate和deactivated

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。

    情境一：离开当前路由，会直接调用；

           当前路由不使用 <keep-alive> 缓存，离开当前路由会直接调用 beforeDestroy 和 destroyed 销毁

    情景二：离开当前路由，不会直接调用，需要程序控制调用；

           当前路由使用 <keep-alive> 缓存，离开当前路由不会直接调用 beforeDestroy 和 destroyed 销毁，需要使用路由钩子函数主动的调用    
               

 beforeRouteLeave(to, from, next) {
     this.$destroy();
     next();
 }