Vue2 生命周期

1. beforeCreate：创建之前（el、data和message都还是undefined,不可用的）
2. created：创建完毕（能读取到数据data的值,但是DOM还没生成）
3. beforeMount：挂载之前（生成DOM,但此时{{ message }}还没有挂载data中的数据）
4. mounted：挂载完毕（{{ message }}已经成功挂载渲染data的值）
5. beforeUpdate：更新之前
6. updated：更新完毕
7. beforeDestroy：销毁之前
8. destroyed：销毁完毕（实例与视图的关系解绑，再修改message的值，视图再也不会更新了）
9. activated：keep-alive 组件激活时调用
10. deactivated：keep-alive 组件停用时调用

注：

• activated 和 deactivated 是比较特殊的两个钩子，需要keep-live配合使用
• 当引入 keep-alive 的时候，页面第一次进入，钩子的触发顺序 created => mounted => activated，退出时触发 deactivated。当再次进入（前进或者后退）时，只触发activated。

补充更新：

父子组件的生命周期执行顺序

1. 加载渲染
   • 父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
2. 更新
   • beforeUpdate -> 子beforeUpdate -> 子updated->父updated
3. 销毁
   • 父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed