vue的生命周期和钩子函数

vue中的生命周期指的是 组件 从创建到销毁一个过程，在这个过程中，我们在每一个特定的阶段会触发一些方法，我们给这些方法起了个名字叫做钩子函数或是组件钩子。
vue的生命周期分三个阶段：初始化、运行中、销毁。其中，初始化有4个钩子函数，分别是beforeCreate（实例创建前）、created（实例创建完成之后）、beforeMount（组件挂载前）、mounted（组件挂载后）。运行中有两个钩子函数，分别是beforeUpdate（数据更新前）和updated（数据更新后），销毁阶段有2个钩子，分别是beforeDestroy（销毁前）和destroyed（销毁后）。
要了解vue的生命周期与钩子函数，可以从一张图开始。

8个钩子函数的用法
初始化:
一.beforeCreate
1. 组件创建前触发，目的是为了组件的生命周期 和 组件中的事件做准备
2. 数据没有获得，真实dom也没有渲染出来
3. 可以进行数据请求，提供了一次数据修改的机会
4. 执行一次

二.created
1. 组件创建结束
2. 数据得到了，真实dom没有渲染出来
3. 可以进行数据请求，提供了一次数据修改的机会
4. 执行了一次

三.beforeMount
1. 组件挂载前
2. 任务： 判断el 判断 template
如果el不存在，那么我们需要手动挂载，如果有，那么判断template
如果template有，那么进行render函数
如果template没有，那么通过 outerHTML 手动书写模板
3. 数据可以获得，但是真实dom还没有渲染
4. 可以进行数据请求，也提供了一次数据修改的机会
5. 执行一次

四.mounted
1. 组件挂载结束
2. 数据获得了，真实dom也获得了
3. 可以进行数据请求，也就可以修改数据
4. 执行了一次
5. 可以进行真实dom的操作了（ 可以进行第三方库的实例化了 ）

综上总结：
1. 数据请求一般写在created里面
2. 第三方库实例化一般写在mounted里面

运行中：
触发条件：数据更新
一.beforeUpdate
1. 更新前
2. 重新渲染 VDOM , 然后通过diff算法比较两次vdom,生成patch 补丁对象
3. 这个钩子函数更多的是内部进行一些操作，我们就不在多干预了
4. 可以触发多次

二.updated
1. 更新结束
2. 真实dom得到了，数据也得到了（ 更新后的 ）
3. 动态数据获取（ 第三方库实例化 ）

销毁：
触发条件： 当组件销毁时：
beforeDestroy和destroyed：
因为这两个钩子函数的功能一致，所以放在一起讲
beforeDestroy和destroyed的作用：
用来做善后的,比如计时器的关闭 第三方实例的删除
数据销毁有两种形式，内部销毁和外部销毁：
内部销毁只会销毁掉组件，不会改变dom
外部销毁不仅会销毁掉组件，也能销毁掉外部的dom结构

beforeDestroy（销毁前）：当经过某种途径调用$destroy方法后，立即执行beforeDestroy

destroyed（销毁后）：vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在。

PS：生命周期钩子函数不允许写成箭头函数，因为会改变函数中this的指向