VueJS的生命周期

概念

从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期。

生命周期函数

创建期间的生命周期函数

• beforeCreate：实例初始化后调用，此时实例刚在内存中创建出来，data和methods还没初始化好。
• created：在实例创建完成后被立即同步调用，实例已在内存中创建好，data和methods已初始化好，此时还没开始编译模板。
• beforeMount：在挂载开始之前被调用，已完成模板编译，还没挂载到页面上。
• mounted：实例被挂载后调用，已将编译好的模板挂载到页面指定的容器中显示。

运行期间的生命周期函数

• beforeUpdate：状态更新前调用，此时data中的值是最新的，但界面上数据还是旧的，还没开始重新渲染DOM节点。
• updated：实例更新完调用，此时data中的值和界面显示的数据都已更新完成，界面已被重新渲染完成。

销毁期间的生命周期函数

• beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。

• destroyed：实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。