Vue生命周期详解

                                                                 生命周期实例图

 三、分步详解

 1. 初始化阶段             

1. new Vue() – Vue实例化(组件也是一个小的Vue实例)
2. Init Events & Lifecycle – 初始化事件和生命周期函数
3. beforeCreate – 生命周期钩子函数被执行
4. Init injections&reactivity – Vue内部添加data和methods等
5. created – 生命周期钩子函数被执行, 实例创建----在此函数能够获取到数据，但获取不到真实DOM元素，可以在此进行网络请求或者注册全局事件
6. 接下来是编译模板阶段 –开始分析
7. Has el option? – 是否有el选项 – 检查要挂到哪里

   没有就调用 $mount() 方法，有就继续检查 template 选项

 2.挂载阶段

1.  进行检查是否有 template 选项，有就编译 template 返回 render 渲染函数，没有则编译 el选项对应标签作为 template (要渲染的模板)。
2. 虚拟DOM挂载成真实DOM之前 beforeMount --- 钩子函数被执行，预处理 data 数据，updated 不会被触发
3. Create ---把虚拟DOM和要渲染的数据一并挂载
4. 真实DOM挂载完成
5. mounted --- 钩子函数被执行，可以在此函数中获取挂载后真实DOM的数据

 3.更新阶段

1. 当 data 里的数据被改变后，更新DOM之前执行
2. beforeUpdate -钩子函数被执行，在此只能拿到最初的DOM元素
3.  虚拟DOM重新渲染，打补丁到真实DOM
4. updated---钩子函数被执行
5. 当有 data 数据又有改变-重复这个循环
6. 

4.销毁阶段

1.  当 $destiry() 被调用 - 比如用 v-if 时组件DOM被移除
2. beforeDestroy - 钩子函数被执行
3. 销毁 watch 等数据监视器、子组件和事件侦听器
4. 实例被销毁后，触发最后一个钩子函数 - destroyed

5.不常用的钩子函数 

•  使用 keep-alive 组件缓存中组件不再创建和销毁, 而是激活和非激活
  
  1. activated - 激活
  
  2. deactivated - 失去激活状态
  
  这两个钩子函数一般是一块配合使用的，组件切换会导致组件被频繁销毁和重新创建, 性能不高,这时候我们就可以用 keep-alive 组件配合这两个钩子函数来控制组件的激活与不激活，该钩子在服务器端渲染期间不被调用。

6.自定义指令的钩子函数

全局下的自定义指令

 input标签中：  v-指令名:属性名.修饰符='值'
                         v-on:keyup.enter="方法"
Vue.directive(’指令名‘,{
    指令生命周期

1.     bind: 绑定时，自定义指令绑定于相应dom时执行，类似于vue生命周期的beforeMount
    

       bind(dom,obj,vnode){
              dom:指令所在dom节点
              obj:{
                      属性名,
                      修饰符,
                      值（value）
               }
               vnode:虚拟dom节点信息
                    context拿到当前指令所在组件实例对象        
       }，

2.     inserted:渲染完成时执行，指令所在dom添加到父节点时执行，类似于mounted

    inserted（dom,obj,vnode）{ },

3.     update:更新时，不保证更新完成（指令所在组件有更新时执行），不保证该更新和当前指令所在dom有关

       update(dom,obj,vnode){
           dom:当前指令所在dom
           obj:{
               属性名
               修饰符
               值   
           }
           vnode:context:获取指令所在组件的实例对象
       }

4.     componentUpdated:更新完成时，指令所在组件更新完成（包括子组件也更新完成）,类似于updated
5.     unbind:解绑，类似于beforeDestroy

})
                                             --------------------------------------------------------------------仅仅是类似

局部自定义指令 

directives:{
    指令名:{生命周期}
}

7.路由的钩子函数

•  全局路由钩子
  □ beforeEach
          前置守卫
  □ afterEach
          已进入相应路由时执行
  □ beforeResolve
          全局解析守卫，解析钩子

•  组件内导航钩子
  ♦ 路由所对应组件钩子(路由配置中的component所对应组件)
           ■ beforeRouteEnter；进入前，进入路由所对应组件前，在beforeCreate前产生的，它不能使用实例化对象this
   

          beforeRouteEnter((to,from,next)=>{
              next((vm)=>{
                  vm:当前组件的实例对象
              })
          })

  
           ■ beforeRouteUpdate：更新前，路由更新了，但是路由所对应组件不变，它是更新前触发，更新没有完成，如果需要获取更新完成后信息，要加$nextTick
           ■ beforeRouteLeave：离开前，切换页面离开前就会触发，它在beforeDestroy前执行
  ♦ 路由配置所对应钩子
           ■ beforeEnter：读取路由配制前会执行该钩子

执行先后
   beforeEach===>beforeEnter===>beforeRouteEnter===>beforeResolve===>afterEach
更新时执行先后
   beforeEach===>beforeRouteUpdate===>afterEach

 beforeDestroy执行时间节点
A路由跳转到B路由时它们A组件与B组件执行的生命周期勾子
beforeCreate(B)===>created(B)===>beforeMount(B)===>beforeDestroy(A)===>
destroyed(A)===>mounted(B)
父组件与子组件生命周期执行先后
beforeCreate(父)===>created(父)===>beforeMount(父)===>beforeCreate(子)===>
created(子)===>beforeMount(子)===>mounted(子)===>mounted(父)