Vue 生命周期钩子

每个 Vue 实例在从被创建到被销毁的过程中，都有 8 个必须要经历的阶段，这 8 个阶段组成了 Vue 的生命周期，Vue 在这几个阶段，都分别提供了对应的函数，这 8 个函数被叫做生命周期钩子，这给了用户在不同阶段添加自己的代码的机会。

对于这 8 个阶段，官方给出了一张图示：

分别是：

1. beforeCreate ：没有创建 Vue 实例之前。可以制作加载动画
2. created ：Vue 实例创建结束，页面还没有生成。此时可以请求页面所需数据，结束加载动画
3. beforeMount ：页面还没有渲染出来，但在虚拟 DOM 中已经存在
4. mounted ：页面加载完成
5. beforeUpdate ：组件更新之前
6. updated ：组件更新之后
7. beforeDestroy ：组件销毁之前
8. destroyed ：组件销毁之后

注意：钩子函数中的 this 指向调用它的 Vue 实例，注意回调函数不要使用箭头函数，会丢失 this 指向。因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止。