vue生命周期, vue常用钩子

官方图解

一个vue实例创建到销毁的过程

created

• 在new Vue()后会创建一个vue实例, 我们每个.vue文件导出的也是一个vue实例
• 实例化后会初始化事件和生命周期函数
• 触发beforeCreate钩子
• 之后会初始化注入组件的信息和对象响应式
• 触发Created钩子

mounted

• created后, 会看是否有element选项配置
• 是否有el选项?
  yes 接着判断是否有template选项。
  no 如果 Vue 实例在实例化时没有收到 el 选项，则它处于“未挂载”状态，没有关联的 DOM 元素,并且后期可以使用 vm.$mount() 手动地挂载一个未挂载的实例。
• 是否有template选项?
  yes 模板编译成render function
  no 编译el的outerHTML作为模板
  补充: outerHTML DOM接口的outerHTML属性获取描述元素（包括其后代）的序列化HTML片段
  mdn:https://developer.mozilla.org/zh-CN/docs/Web/API/Element/outerHTML
  
• 触发beforeMounted
• 创建Vue 实例使用的根 DOM 元素并且替换el
• 触发mounted

update

• update钩子是在vue实例内部data发生改变时触发
• 当data改变时触发beforeUpdate
• 当虚拟dom重新渲染和修补后, 触发updated

destroyed

• 当实例调用vm.$destroy()时, 会完全销毁一个实例
• 触发beforeDestroy
• 接着会解绑该vue实例上的所有watchers, 子组件和事件监听.
• 触发destroyed

路由钩子

总结三类导航守卫:

全局守卫, 路由独享守卫, 组件内守卫
具体钩子函数参考: 点这里

keep-alive钩子

注意: 这两个钩子函数在服务器端渲染期间不被调用。

activated 被 keep-alive 缓存的组件激活时调用。
deactivated 被 keep-alive 缓存的组件停用时调用。