官方图解
一个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作为模板
补充:outerHTMLDOM接口的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 缓存的组件停用时调用。
