【前端学习笔记】Vue的生命周期

生命周期涉及到的钩子函数总共有8个。

1、beforeCreate

2、create

3、beforeMount

4、mounted

5、beforeUpdate

6、update

7、beforeDestory

8、destory

---

Vue组件的生命周期分为四个阶段，每个阶段有2个生命钩子函数，总计8个。

创建阶段：

主要用于组件创建时，获取数据设置组件。

beforeCreate

created

挂载阶段：

主要用于访问组件 DOM。

beforeMount

mounted

更新阶段：

数据变化，组件重新渲染。

beforeUpdate

updated

销毁阶段：

用于销毁组件，做清理工作

beforeDestory

destory

---

生命周期函数示意图  

---

一、创建阶段

主要用于组件创建时，获取数据设置组件。创建钩子组件是运行的第一个钩子。允许在组件甚至在添加到DOM 之前的操作。创建钩子也在服务器端渲染器件运行。

beforeCreate

在实例初始化之后，数据观测和event。watcher事件配置之前被调用。

是生命周期的第一个钩子，在事件、生命周期初始化之后。

create

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置。

数据观测（data observer），属性和方法的运算。watch、event事件回调。然而，挂载阶段没有开始。$el属性目前不可见。

---

二、挂载阶段

主要用于访问组件 DOM。

此时给Vue实例对象添加$el对象，并且替换掉挂载的DOM元素。因为在之前的console中打印的结果可以看到beforeMount之前的el上还是undefined。

beforeMount

在挂载开始之前被调用：先关掉render函数首次被调用。该钩子在服务器渲染期间不被调用。

mounted

mounted钩子是经常使用的生命周期钩子，它拥有访问组件模板的能力。

el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内的元素，当mounted被调用时vm.$el也在文档内。

---

三、更新阶段

数据变化，组件重新渲染。

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

beforeUpdate

beforeUpdata钩子在您的组件的数据更改之后运行，更新周期开始，就在DOM修改和重新渲染之前。它允许您在实际渲染之前获取组件上的任何反应数据的新状态。

updated

keep-alive组件激活时不被调用。

更新的钩子在组件和DOM重新呈现数据更改后运行。如果需要在属性更改后访问DOM ，这可能是最安全的做法。

---

四、销毁阶段

用于销毁组件，做清理工作。

销毁钩子允许在组件销毁时执行操作，例如清理或分析发送。当您的组件被拆除并从DOM中删除时，它们将触发。

beforeDestory

实例销毁之前调用。在这一步，实例仍然完全可用。

destoryed

Vue实例销毁后调用。调用后，Vue实例指示的所用东西都会解除绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

---