浅谈Vue生命周期

Vue生命周期

生命周期图示

1. 以下生命周期图中注释为个人理解
   

生命周期钩子

1. 生命周期钩子 = 生命周期函数 = 生命周期事件

生命周期钩子（函数）的分类

1. 创建期间的生命周期钩子（函数）
2. 运行期间的生命周期钩子（函数）
3. 销毁期间的生命周期钩子（函数）

创建期间的生命周期钩子

1. beforeCreate：在实例初始化之后，进行数据监听和事件/监听器的配置之前同步调用
2. created：在实例创建完成后被立即同步调用，此时数据、计算属性、方法、事件/监听器的回调函数都以及配置完毕，但是挂载阶段还未开始；若要调用methods，或者操作data数据，最早只能在created钩子中进行
3. beforeMount：此函数执行时模板已经在内存中，但是还未挂载到页面中

运行期间的生命周期钩子

1. mounted：若如果要通过某些插件操作页面上的DOM节点，最早要在mounted中进行

   1. 注意：mounted不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作，可以在mounted内部使用vm.$nextTick

      mounted: function() { 
          this.$nextTick(function() { 
              // 仅在整个视图都被渲染之后才会运行的代码 
          }) 
      }
      

   2. beforeUpdate：在数据发生改变后，DOM被更新之前被调用

   3. update：在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用

      1. 注意：update不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作，可以在update内部使用vm.$nextTick

         update: function() { 
             this.$nextTick(function() { 
                 // 仅在整个视图都被渲染之后才会运行的代码 
             }) 
         }
         

销毁期间的生命周期钩子

1. beforeDestory：实例销毁之前调用，这一步实例仍然完全可用
2. destroyed：实例销毁后调用，此时组件中所有的数据，方法，指令，过滤器都不可再用

常用的生命周期钩子

1. mounted：发送ajax请求、启用定时器、绑定自定义事件、订阅消息等（初始化操作）
2. beforeDestroy：清除定时器、绑定自定义事件、取消订阅消息等（收尾工作）