VUE 生命周期的钩子函数介绍

生命周期
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
实例销毁完成
• 解除数据绑定、事件监听
• 没什么大用。不用去操作它