Vue生命周期详解

一、生命周期的概念

        生命周期，顾名思义就是一个vue组件从 创建 到 销毁 的过程。 

 二、钩子函数

        Vue中有许多内置函数，是随着组件生命周期阶段自动执行的 。我们可以通过钩子函数来在特定的某个生命周期的阶段执行特定的操作，比如能够在 created 中发起 ajax 请求，从而能够初始化 data 数据渲染页面。

        生命周期可以分为四个阶段：

• 初始化阶段
• 挂载阶段
• 更新阶段
• 销毁阶段

         每个阶段又有相对应的方法，分别为：

阶段	方法名	方法名
初始化	beforeCreate	created
挂载	beforeMount	mounted
更新	beforeUpdate	updated
销毁	beforeDestroy	destroyed

官方文档：Vue 实例 — Vue.js

                                                                 生命周期实例图

 三、分步详解

 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(父)