vue-8.生命周期钩子函数详解
本文于 642 天之前发表，文中内容可能已经过时。
概述
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数。
正文
参考链接：生命周期
案例链接：https://gitee.com/caseAddress/vueDemo07.git
一.什么是生命周期钩子函数
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
比如上一篇文章：vue-事件结合双向绑定实现最简单版todolist中使用到的mounted，也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 beforeDestroy、updated 和 destroyed等。生命周期钩子的 this 上下文指向调用它的 Vue 实例。具体使用api方法：选项-生命周期钩子；
vue的8中生命周期函数：
1.beforeCreate：该函数在实例对象刚被创建，还没有绑定属性时触发执行。
2.created：该函数在实例对象完成创建和属性绑定，但是DOM还未生成（$el属性还不存在）时触发执行。
3.beforeMount：该函数在组件挂载之前触发执行。
4.mounted：该函数在组件挂载完成之后触发执行。
5.beforeUpdate：该函数在组件数据更新之前触发执行。
6.updated：该函数在组件数据更新完毕之后触发执行。
7.beforeDestroy：该函数在实例对象销毁之前触发执行。
8.destroyed：该函数在实例对象完成销毁之后触发执行。
| 钩子函数 | 触发的行为 | 在此阶段可以做的事情 |
|---|---|---|
| beforeCreadted | vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。 | 加loading事件 |
| created | vue实例的数据对象data有了，$el还没有 | 结束loading、请求数据为mounted渲染做准备 |
| beforeMount | vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换。 | |
| mounted | vue实例挂载完成，data.filter成功渲染 | 配合路由钩子使用 |
| beforeUpdate | data更新时触发 | |
| updated | data更新时触发 | 数据更新时，做一些处理（此处也可以用watch进行观测） |
| beforeDestroy | 组件销毁时触发 | |
| destroyed | 组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在 | 组件销毁时进行提示 |
二.官网生命周期图
