生命周期
vue 实例或组件(组件本质上就是一个具有预定义选项的实例)创建到销毁的一系列过程,就叫做生命周期。
生命周期的钩子函数
在生命周期不同的阶段中会自动执行的函数,就叫做生命周期的钩子函数
生命周期的三个大阶段及其钩子函数
- 初始化挂载阶段
- beforeCreate
- created
- beforeMount
- mounted
- 更新阶段
- beforeUpdate
- updated
- 销毁阶段
- beforeDestroy
- destroyed
beforeCreate
实例创建之前
- 一个生命周期过程中,只会触发一次
- 获取不到挂载点元素和data数据
- 一般没什么作用,但硬要去杠的话也是可以发送ajax的,因为 ajax 是异步的操作,异步完成的时候,生命周期进入了后续阶段(mounted 都完成了),所以在后续阶段中是可以去修改 data 中的数据的。
created
实例创建完成
- 一个生命周期过程中,只会触发一次
- 能获取到 data 选项中的数据了,能调用 methods 选项中函数了。
- 获取不到挂载点元素
- 一般在这里发送 ajax 请求获取页面一打开就需要的数据
beforeMount
实例挂载之前:相关的 render 函数首次被调用。
挂载的意思是:vue 解析模板数据完成,并替换到真实的DOM上面。
- 一个生命周期过程中,只会触发一次
- 通过 vm.$el 获取不到真实的DOM
- 一般没什么作用,不用去操作它。
mounted
实例挂载完成
- 一个生命周期过程中,只会触发一次
- 能够获取到真实的DOM
- 初始化与DOM相关的操作可以放在这儿。比如 Swiper 的实例化。
beforeUpdate
实例更新之前
- 一个生命周期过程中,可能会触发多次
- 能得到数据更新之前的DOM,但是得不到数据更新之后的DOM
- 一般不要在这里去修改数据,也不要去发送异步请求 ,会进入死循环
- 一般没什么作用,不用去操作它。
updated
实例更新完成
- 一个生命周期过程中,可能会触发多次。
- 能得到数据更新之后的DOM。
- 一般不要在这里去修改数据,也不要去发送异步请求 ,会进入死循环
- 一般用于真实DOM更新之后的操作,比如 Swiper 的更新。
beforeDestroy
实例销毁之前
- 做一些销毁工作,比如 计时器的清除、全局事件绑定的销毁等工作。
destroyed
实例销毁完成
- 这个时候只剩下了dom空壳。组件已被拆解,数据绑定被卸除,监听被移出,子实例也统统被销毁。
- 一般没什么作用,不用去操作它。