话不多说直接上图,这是一张高清图,所有的精髓都在里面
以下是个人理解
beforeCreate
- 创建一个Vue实例,此时实例上只有一些生命周期函数和默认的事件
- 此时data computed watch methods上的方法和数据均不能访问
created
- 可以对data数据进行操作,可进行一些请求,请求不易过多,避免白屏时间太长。
beforeMount
- 判断el的挂载方式
- 判断是否有template设置
- 将template进行渲染保存到内存当中,还未挂载在页面上
mounted
- 将内存中的模版挂载到页面上
- 此时可以操作页面上的DOM节点
- 此时组件从创建阶段进入运行阶段
beforeUpdate
- 页面显示的数据是旧的,此时data里面的数据是最新,页面数据和data数据暂未同步
updated
- 根据data里的最新数据渲染出最新的DOM树,然后将最新的DOM挂载到页面
- 此时data和页面数据一致,都是最新的
beforeDestroy
- 此时组件从运行阶段进入到销毁阶段
- 组件上的data和methods以及过滤器等都出于可用状态,销毁还未执行
destroyed
- 组件已经被完全销毁,组件中所有的数据、方法、指令、过滤器等,都已不可用
其他钩子
一般在用到keep-alive组件时会用到该activated和deactivated钩子
activated
在加载对应模块时会被调用,页面第一次加载时也会被调用
deactivated
组件切换出去时被调用
errorCaptured
当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
自定义指令提供的钩子函数
bind
只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
inserted
被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)
update
所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前
componentUpdated
指令所在组件的 VNode 及其子 VNode 全部更新后调用
unbind
只调用一次,指令与元素解绑时调用
机会只会留给有准备的人,加油!!!