- 前言
- 什么是生命周期钩子
- 使用规范
- 生命周期函数描述
- 案例展示
根据 官方文档 中的描述，增加个人的理解和说明。这只是一个笔记。
什么是生命周期钩子至于什么是生命周期钩子，为什么会取钩子这个词，我也不甚理解。但对于生命周期而言，相信很多人都会知道大部分软件都会有这方面的词汇。
比如：Java-web框架中的Spring生命周期、html的页面生命周期等。
在官网中，针对生命周期钩子有下面的描述内容：
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。
同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段 添加自己的代码的机会。
对于生命周期钩子函数的使用，在 生命周期钩子函数API 中有各种函数说明。
使用规范在使用生命周期钩子函数时，需要注意下列几点要求：
- 必须写在 new Vue 实例中。
- 生命周期钩子函数是 Vue 实例中的成员方法，注意这里不是methods！
在对象内，以属性的方式进行申明！
- 在生命周期的函数中，不能出现箭头函数。
无法使用this。
| 函数名 | 触发场景 |
|---|---|
| beforeCreate | 实例化之后，在数据观测(data observer)和 event/watcher 事件配置之前被调用 |
| created | 已成创建好实例，在实例创建好之后被调用。 此时，实例已经完成以下配置：数据观测(data observer)，属性和方法的运算，watch / event 事件回调。 但是，挂载阶段还未开始， $el 属性目前不可见。 |
| beforeMount | 在挂载开始之前被调用：相关的渲染函数首次被调用。 |
| mounted | 挂载成功后被调用，el 将被新创建的 vm.$el 替换。 |
| beforeUpdate | 数据更新(变化)之前被调用。 |
| updated | 数据更新(变化)完毕被调用。 |
关于具体的调用顺序，参考下列案例，进行控制台打印日志进行参考：
页面刚加载时：
页面加载5秒后，由于定时任务修改参数信息，此时控制台打印日志信息如下所示：
