Javascript--Vue--生命周期钩子

什么是生命周期

对人来讲，生命周期就是人的一辈子

同理，对象的生命周期就是对象的一辈子，即

• 建立对象
• 使用对象
• 销毁对象

Vue的生命周期

在Vue中，他所建立出的实例也是一个对象，因此Vue的生命周期与对象相同

• 简单来讲为：初始化，运行中，销毁
• 详细来讲：开始建立，初始化数据，编译模板，挂载DOM，渲染→更新→渲染，销毁等过程

生命周期钩子

对于人来讲，在不一样的生命时期会有不一样的事要干，放在对象中一样适用。

在实例的建立过程当中会经历一系列的生命周期，在不一样的时期，会运行一些叫作生命周期钩子的函数。用户能够在生命周期钩子中添加代码，使其在实例建立过程当中达到想要的特殊的效果

全部的生命周期钩子自动绑定this上下文到实例中，所以能够访问数据并对属性和方法进行运算。

箭头函数没有this，所以不能使用箭头函数来定义一个生命周期方法

beforeCreate

在实例初始化以后，数据观测（data observer）和event/watcher事件配置以前被调用

created

在实例建立完成后被当即调用。在这一步，实例已完成：数据观测，属性和方法的运算，watch/event事件回调。然而挂载阶段还没开始，$el属性目前不可用

beforeMount

在挂载以前被调用，相关的render（渲染）函数首次被调用

• 该钩子在服务器渲染期间不被调用

mounted

实例被挂载后调用，这时el已经被新建立的vm.$el替换

• mounted 不会保证全部的子组件也都一块儿被挂载。若是你但愿等到整个视图都渲染完毕，能够在 mounted 内部使用 vm.$nextTick：

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}
复制代码

• 该钩子在服务器渲染期间不被调用

beforeUpdate

数据更新时调用，发生在虚拟DOM打补丁以前，这里适合在更新以前访问现有的DOM

• 该钩子在服务器渲染期间不被调用,由于只有初次渲染会在服务端进行

updated

因为数据更改致使的虚拟DOM从新渲染和打补丁，在这以后会调用该钩子

• 注意 updated 不会保证全部的子组件也都一块儿被重绘。若是你但愿等到整个视图都重绘完毕，能够在 updated 里使用 vm.$nextTick：

updated: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been re-rendered
  })
}
复制代码

• 该钩子在服务器渲染期间不被调用

actived

被keep-alive缓存的组件激活时调用

• 该钩子在服务器渲染期间不被调用

deactivated

被keep-alive缓存的组件停用时调用

• 该钩子在服务器渲染期间不被调用

beforeDestroy

实例销毁以前调用，在这一步实例仍然彻底可用

• 该钩子在服务器渲染期间不被调用

destroyed

实例销毁后调用，该钩子被调用后，对应Vue实例的全部指令都被解绑，全部的事件监听器被移除，全部的子实例也被销毁

• 该钩子在服务器渲染期间不被调用

errorCaptured

• 详细：当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子能够返回 false 以阻止该错误继续向上传播。
• 你能够在此钩子中修改组件的状态。所以在捕获错误时，在模板或渲染函数中有一个条件判断来绕过其它内容就很重要；否则该组件可能会进入一个无限的渲染循环。

错误传播规则：

• 默认状况下，若是全局的 config.errorHandler 被定义，全部的错误仍会发送它，所以这些错误仍然会向单一的分析服务的地方进行汇报。

• 若是一个组件的继承或父级从属链路中存在多个 errorCaptured 钩子，则它们将会被相同的错误逐个唤起。

• 若是此 errorCaptured 钩子自身抛出了一个错误，则这个新错误和本来被捕获的错误都会发送给全局的 config.errorHandler。

• 一个 errorCaptured 钩子可以返回 false 以阻止错误继续向上传播。本质上是说“这个错误已经被搞定了且应该被忽略”。它会阻止其它任何会被这个错误唤起的 errorCaptured 钩子和全局的 config.errorHandler。

简单总结

生命周期各个阶段经历分析：

参考博客： blog.csdn.net/jiang770103…