生命周期
vue 实例或组件(组件本质上就是一个具有预定义选项的实例)创建到销毁的一系列过程,就叫做生命周期
生命周期的钩子函数
在生命周期不同的阶段中会自动执行的函数,就叫做生命周期的钩子函数
生命周期可以分为三个大阶段
• 初始化挂载阶段
i.beforeCreate
ii.created
iii.beforeMount
iv.mounted
• 更新阶段
i.beforeUpdate
ii.updated
• 销毁阶段
i.beforeDestroy
ii.destroyed
生命周期的钩子函数有:
• beforeCreate 实例创建之前 触发一次
• created 实例创建完成 触发一次
• beforeMount 实例挂载到页面之前 挂载前 触发一次
• mounted 实例挂载到页面之后 挂载完成 触发一次
• beforeUpdate 实例数据更新之前 可能触发多次
• updated 实例数据更新完成,页面得到更新 可能触发多次
• beforeDestroy 实例销毁之前 触发一次
• destroyed 实例销毁完成 触发一次
beforeCreate
实例创建之前
• 获取不到 vm.$el• 获取不到 vm.$data
• 一个生命周期过程中,只会触发一次
• 一般没什么大用。不用去操作它
created
实例创建完成
• 获取不到 vm.$el
• 能获取到 data 选项中的数据了。能调用 methods 选项中函数了。
• 一个生命周期过程中,只会触发一次
• 在这里发送 ajax 请求获取页面一打开就需要的数据
beforeMount
实例挂载之前
挂载的意思是:vue 解析模板数据完成,并替换到真实的DOM上面。
• 通过 vm.$el 获取不到真实的DOM
• 想一想能不能获取 data 与 methods 中的 东西?当然可以。之前的都可以的难道越活越过去么?
• 一个生命周期过程中,只会触发一次
• 一般没什么大用。不用去操作它
mounted
实例挂载完成
• 能够获取到真实的DOM
• 想一想能不能获取 data 与 methods 中的 东西?当然可以。之前的都可以的难道越活越过去么?
• 一个生命周期过程中,只会触发一次
• 初始化与DOM相关的操作,需要放在这儿。比如 Swiper 的实例化
beforeUpdate
实例更新之前
• 能得到数据更新之前的DOM。但是得不到数据更新之后的DOM
• 一个生命周期过程中,可能会触发多次
• 不要在这里去修改数据,也不要去发送异步请求 (你怕死循环不)
• 一般没什么大用。不用去操作它
updated
实例更新完成
• 能得到数据更新之后的DOM
• 一个生命周期过程中,可能会触发多次
• 不要在这里去修改数据,也不要去发送异步请求 (你怕死循环不)
• 一般用于真实DOM更新之后的操作。比如 Swiper 的更新
beforeDestroy
实例销毁之前
• 做一些销毁工作,比如 计时器的清除、全局事件绑定的销毁等工作
destroyed
实例销毁完成
• 解除数据绑定、事件监听
• 没什么大用。不用去操作它