VUE 生命周期

生命周期图示（来自 vue 官网）

一、⽣命周期是什么？
Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更
新 -> 渲染、卸载等⼀系列过程，我们称这是 Vue 的⽣命周期。

 

二、各个⽣命周期的作⽤

1、 创建前（beforeCreate）：对应钩子函数是 beforeCreate, 组件实例被创建之初，组件的属性⽣效之前。实例初始化阶段，数据观察和事件机制都还没有形成，不能获取到DOM  节点

2、 创建后 （created）： 对应钩子函数是Created,  组件实例已经完全创建，属性也绑定，但真实 dom 还没有⽣成，$el 还不可⽤。（vue 实例已创建，但是还是不能获取 DOM 节点）

3、 载入前 （beforeMount）： 对应钩子函数 beforeMount, 在挂载开始之前被调⽤：相关的 render 函数⾸次被调⽤。仍然不能获取 DOM 元素，此时 vue 的根元素已经创建，下面 vue 对 DOM 的操作将围绕这个根节点展开。beforeMount 是过渡性阶段，一个项目一般只能用一次

4、 载入后 （mounted）： 对应钩子函数 mounted,el 被新创建的 vm.$el 替换，并挂载到实例上去之后调⽤该钩⼦。 使用得最多的钩子函数， 一般的异步请求都写在这里，此时的vue 和 DOM 都已经渲染出来了

5、 更新前 （beforeUpdate）： 对应钩子函数 beforeUpdate, 组件数据更新之前调⽤，发⽣在虚拟 DOM 打补丁之前。VUE 遵循数据驱动 DOM 的原则， beforeUpdate 函数在数据更新后虽然没有立即更新数据，但是 DOM 的数据会改变，这是 VUE 双向数据绑定的作用

6、 更新后 （updated）： 对应钩子函数 updated，组件数据更新之后。DOM 会同步更改过的内容

7、销毁前 （beforeDestroy）： 对应钩子函数 beforeDestroy, 组件销毁前调⽤。在上一阶段 VUE 已经成功通过 数据驱动DOM 更新,当我们不再需要 VUE 操纵 DOM, 就需要销毁，也就是清除 VUE 与 DOM 的关联，调用 destroy方法 可以销毁当前组件，在销毁前，会调用 beforeDestroy 钩子函数

8、 销毁后 （destroyed）： 对应钩子函数 destroy， 组件销毁后调⽤。销毁后，会调用 destroyed 钩子函数