四、Vue生命周期

一、生命周期图解

Vue生命周期

正如生命有者生老病死一样，程序一样有和生命类似的周期，Vue为开发者定义了11个生命周期钩子，便于开发者在Vue处于不同状态时调用，他们分别是：

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• activated
• deactivated
• beforeDestroy
• destroyed
• errorCaptured (Vue 2.5 版本新增)

beforeCreate

在Vue实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用

created

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，dom渲染、挂载阶段还没开始，$el 属性目前不可见

beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用

mount

dom渲染、挂载完成之后调用该钩子。

注意这里dom挂载完成不包括子组件

beforeUpdate

数据更新时调用，发生在 DOM 重新渲染、打补丁之前
这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子

activated

keep-alive 组件激活时调用

deactivated

keep-alive 组件停用时调用

keep-alive 具体参见Vue内置组件keep-alive

beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用

destroyed

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例都会被销毁

errorCaptured

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播
我们可以用如下代码来测试Vue基本的生命周期执行顺序

  
  
  
  
  


  

    
{{message}}
  

在浏览器中打开控制台，就可以看到Vue整个生命周期执行顺序
可以看到在beforeCreate - created 后 $data 被挂载

生命周期

beforeMount - mounted 后 $el被挂载并更新

生命周期

在mounted 改变data中的message后 beforeUpdate - updated 被调用

生命周期

最后在mounted 200 毫秒后 手动调用 vm.$destroy(), 销毁Vue对象,beforeDestroy - destroyed 被调用

生命周期

Vue代码中使用的mounted函数为Vue独有的生命周期方法，要了解生命周期请参考
Vue生命周期文档
生命周期图解
生命周期测试代码