包含vue官网给出的9个钩子,还有router附带的2个生命周期钩子,还有1个就是$nextTick。
官网示例:
钩子名称 | created() | beforeCreate() | mounted() | activated() | deactivated() | beforeDestroy() | destroyed() | $nextTick |
解释 | 在实例创建完成后被立即同步调用 | 在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用 | 实例被挂载后调用,这时 el 被新创建的 vm.$el 替换了 | 被 keep-alive 缓存的组件激活时调用 | 被 keep-alive 缓存的组件失活时调用 | 实例销毁之前调用 | 实例销毁后调用 | 仅在整个视图都被渲染之后才会运行的代码 |
使用场景 | 数据侦听、计算属性、方法、事件/侦听器的回调函数 | 监听绑定 | 赋值 | 定时器开始 | 定时器停止 | 监听解绑 | 使input输入框自动获取焦点 |
Vue生命周期钩子官网地址https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90
export default {
name: "demoLayout",
created() {
//创建时
},
beforeCreate() {
// 创建完成时
},
mounted() {
// @TODO 挂载时 常用 如:
this.$nextTick(() => {
// dom渲染后,自动执行方法 如:使input输入框自动获取焦点
})
},
activated() {
//组件可见时 @TODO 只用使用router组件才有的生命周期
},
deactivated() {
//组件隐藏时 @TODO 只用使用router组件才有的生命周期
},
beforeDestroy() {
// @TODO 快要销毁时 常用
},
destroyed() {
// 销毁
},
}