前言

人见白头嗔，我见白头喜

目标

理解钩子函数，和基本应用

一、定义

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

二、vue加载过程

三、基本的使用

共有八个基本钩子函数

1.beforeCreate --创建前

触发的行为：vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。

在此阶段可以做的事情：加loading事件

2.created --创建后

触发的行为：vue实例的数据对象data有了，$el还没有

在此阶段可以做的事情：解决loading，请求ajax数据为mounted渲染做准备

3.beforeMount --渲染前

触发的行为：vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换

在此阶段可以做的事情：。。。

4.mounted --渲染后

触发的行为：vue实例挂载完成，data.filter成功渲染

在此阶段可以做的事情：配合路由钩子使用

5.beforeUpdate --更新前

触发的行为：data更新时触发

在此阶段可以做的事情：。。。

6.updated —更新后

触发的行为：data更新时触发

在此阶段可以做的事情：数据更新时，做一些处理（此处也可以用watch进行观测）

7.beforeDestroy —销毁前

触发的行为：组件销毁时触发

在此阶段可以做的事情：可向用户询问是否销毁

8.destroyed —销毁后

触发的行为：组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在

参考

https://www.html.cn/qa/vue-js/18935.html