Vue 生命周期与钩子函数

概念

生命周期

vue 实例或组件（组件本质上就是一个具有预定义选项的实例）创建到销毁的一系列过程，就叫做生命周期

生命周期的钩子函数

在生命周期不同的阶段中会自动执行的函数，就叫做生命周期的钩子函数

vm.$el

一个 实例属性 。是当前实例的根的DOM对象

vm.$destroy()

一个 实例方法。销毁实例的。一般不使用
调用之后，会触发 beforeDestroy 与 destroyed 两个生命周期的钩子函数

vm.$data

一个 实例属性。当前实例中 data 选项中定义的数据

生命周期可以分为三个大阶段

1. 初始化挂载阶段
   1. beforeCreate
   2. created
   3. beforeMount
   4. mounted
2. 更新阶段
   1. beforeUpdate
   2. updated
3. 销毁阶段
   1. beforeDestroy
   2. destroyed

生命周期的钩子函数有：

1. beforeCreate 实例创建之前 触发一次
2. created 实例创建完成 触发一次
3. beforeMount 实例挂载到页面之前 挂载前 触发一次
4. mounted 实例挂载到页面之后 挂载完成 触发一次
5. beforeUpdate 实例数据更新之前 可能触发多次
6. updated 实例数据更新完成，页面得到更新 可能触发多次
7. beforeDestroy 实例销毁之前 触发一次
8. destroyed 实例销毁完成 触发一次

beforeCreate

实例创建之前

1. 获取不到 vm.$el
2. 获取不到 vm.$data
3. 一个生命周期过程中，只会触发一次
4. 一般没什么大用。不用去操作它

created

实例创建完成

1. 获取不到 vm.$el
2. 能获取到 data 选项中的数据了。能调用 methods 选项中函数了。
3. 一个生命周期过程中，只会触发一次
4. 在这里发送 ajax 请求获取页面一打开就需要的数据

beforeMount

实例挂载之前
挂载的意思是：vue 解析模板数据完成，并替换到真实的DOM上面。

1. 通过 vm.$el 获取不到真实的DOM
2. 一个生命周期过程中，只会触发一次
3. 一般没什么大用。不用去操作它

mounted

实例挂载完成

1. 能够获取到真实的DOM
2. 一个生命周期过程中，只会触发一次
3. 初始化与DOM相关的操作，需要放在这儿。比如 Swiper 的实例化

beforeUpdate

实例更新之前

1. 能得到数据更新之前的DOM。但是得不到数据更新之后的DOM
2. 一个生命周期过程中，可能会触发多次
3. 不要在这里去修改数据，也不要去发送异步请求 （会导致重复触发进入死循环）
4. 一般没什么大用。不用去操作它

updated

实例更新完成

1. 能得到数据更新之后的DOM
2. 一个生命周期过程中，可能会触发多次
3. 不要在这里去修改数据，也不要去发送异步请求 （会导致重复触发进入死循环）
4. 一般用于真实DOM更新之后的操作。比如 Swiper 的更新

beforeDestroy

实例销毁之前

1. 做一些销毁工作，比如 计时器的清除、全局事件绑定的销毁等工作

destroyed

实例销毁完成

1. 解除数据绑定、事件监听
2. 没什么大用。不用去操作它