Vue的生命周期及钩子函数

vue的生命周期

• 生命周期：vue实例从创建到销毁的过程，称其为vue生命周期。
• 在该过程当中所暴露（当执行到某个阶段时自动运行）出来的函数，称为钩子函数。

通过上图可以看到Vue的生命周期共8个钩子

生命周期钩子函数

1. 创建前/创建后
   beforeCreate:创建实例前触发
   created:创建实例后触发

在 beforeCreate 钩子函数调用的时候，是获取不到 props 或者 data 中的数据的，因为这些数据的初始化都在 initState 中。

然后会执行 created 钩子函数，在这一步的时候已经可以访问到之前不能访问到的数据，但是这时候组件还没被挂载，所以是看不到的。

2. 挂载前/挂载后
   beforeMount:挂载之前触发
   mounted:挂载之后触发

接下来会先执行 beforeMount 钩子函数，开始创建 VDOM，最后执行 mounted 钩子，并将 VDOM 渲染为真实 DOM 并且渲染数据。组件中如果有子组件的话，会递归挂载子组件，只有当所有子组件全部挂载完毕，才会执行根组件的挂载钩子。

3. 更新前/更新后
   beforeUpdate:更新视图之前触发
   updated:更新视图（dom）之后触发。

接下来是数据更新时会调用的钩子函数 beforeUpdate 和 updated，这两个钩子函数没什么好说的，就是分别在数据更新前和更新后会调用。

4. 销毁前/销毁后
   beforeDestroy:实例销毁前触发
   destroyed:实例销毁后触发

最后就是销毁组件的钩子函数 beforeDestroy 和 destroyed。前者适合移除事件、定时器等等，否则可能会引起内存泄露的问题。然后进行一系列的销毁操作，如果有子组件的话，也会递归销毁子组件，所有子组件都销毁完毕后才会执行根组件的 destroyed 钩子函数。