Vue2生命周期

生命周期

生命周期(Life Cycle)是指一个组件从创建 ->运行 ->销毁的整个阶段，强调的是一个时间段

生命周期函数

由vue框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行

生命周期强调的是时间段，生命周期函数强调的是时间点

生命周期函数的分类

组件创建阶段

new Vue() 创建组建的实例对象

init Events & LifeCycle 初始化事件和生命周期函数

–> beforeCreate() 组件的props/data/methods尚未被创建，都处于不可用状态

init injections & reactivity 初始化props、data、methods

–> created() 组件的props/data/methods已被创建，都处于可用状态，但组件的模板结构未生成
此时为最早可以使用属性方法的阶段，此阶段常用于发送ajax请求获取数据，或用于绑定自定义事件交换数据

Has "el"option? or when vm.$mount(el) is called 是否有挂载元素el

Has “template” option? 基于数据和模板，在内存中编译生成HTML结构

有模板属性时渲染模板属性 Compile template into render function *
没有模板属性时渲染挂载元素el Compile el’s outerHTML as template *

–> beforeMount() 将要把内存中编译好的HTML结构渲染到浏览器，此时浏览器还没有当前组件的DOM

Create vm.$el and replace “el” with it 把内存中编译生成的HTML结构替换掉el属性指定的DOM元素

–> mounted() 已经把内存中的HTML结构渲染到浏览器，此时浏览器已经包含当前组件的DOM结构
此时为最早可以操作组件DOM元素的阶段

组件运行阶段

when data changes 当数据发生改变时

–> beforeUpdate() 将要根据变化之后的最新的数据，重新渲染组件中的模板结构

Virtual DOM re-render and patch 根据最新的数据，重新渲染组件的DOM结构

–> updated() 已经根据最新的数据，完成了组件的DOM结构的重新渲染
能够操作最新的DOM元素

组件销毁阶段

when vm.$destory() is called 调用组件的销毁函数

–> beforeDestory() 将要销毁此组件，此时尚未销毁，还处于工作的状态

Teardown watchers,child components and event listeners 销毁当前组件的数据侦听器、子组件、事件监听

–> destoryed() 组件已经被销毁，此组件在浏览器中对应的DOM结构已被完全移除

keep-alive 缓存特殊的两个阶段

–> activated 组件激活时

被 keep-alive 缓存的组件激活时调用。初始化操作放在actived里面,该钩子在服务器端渲染期间不被调用。

–> deactivated组件停用时

被 keep-alive 缓存的组件停用时调用。在里面可以进行一些善后操作,该钩子在服务器端渲染期间不被调用。

添加keep-alive标签后会增加activated和deactivated这两个生命周期函数

初始化操作放在actived里面，一旦切换组件

因为组件没有被销毁，所以它不会执行销毁阶段的钩子函数，所以移除操作需要放在deactived里面

在里面进行一些善后操作，这个时候created钩子函数只会执行一次，销毁的钩子函数一直没有执行。

错误处理

当捕获一个来自子孙组件的错误时被调用。

此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。

此钩子可以返回 false 以阻止该错误继续向上传播

错误传播规则

默认情况下，如果全局的 config.errorHandler定义，所有的错误仍会发送它

因此这些错误仍然会向单一的分析服务的地方进行汇报

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

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

不能捕获异步promise内部抛出的错误和自身的错误

一个 errorCaptured 钩子能够返回 false 以阻止错误继续向上传播

本质上是说“这个错误已经被搞定了且应该被忽略”

它会阻止其它任何会被这个错误唤起的 errorCaptured 钩子和全局的 config.errorHandler

错误捕获

组件遇到错误时通过Vue.config.errorHander进行捕获

Vue.config.errorHandler = (err, vm, info) => {
    console.log('进来啦~');
}

export default {
    created() {
        let a = null;
        if(a.length > 1) {
            // ...
        }
    }
};

–> errorCaptured 类似错误边界处理

Vue.component('ErrorBoundary', {
  data: () => ({ error: null }),
  errorCaptured (err, vm, info) {
    this.error = `${err.stack}\n\nfound in ${info} of component`
    return false
  },
  render (h) {
    if (this.error) {
      return h('pre', { style: { color: 'red' }}, this.error)
    }
    // ignoring edge cases for the sake of demonstration
    return this.$slots.default[0]
  }
})