脚本宝典收集整理的这篇文章主要介绍了Vue的生命周期,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
Vue的生命周期是一个非常重要的点,如果不懂Vue的生命周期,那么很多时候,就不知道Vue的实际渲染时机,程序中会出现各种bug。
因此,学习Vue的生命周期是非常用必要的。
下面我们来画一个简单的生命周期图:
new Vue()
||
||
||
初始化event和watch
||
||=====> beforeCreate
||
属性、方法、数据等内容的计算
||
||=====> created
||
存在el选项
||
||
||
不存在template选项
||
||=====> beforeMount
||
创建vm.$el替换el选项
||
||=====> mounted
||
当内容发生更新
||
||=====> beforeUpdate
||
虚拟DOM重新渲染
||
||=====> updated
||
调用vm.$destroy()
||
||=====> beforeDestroy
||
卸载watcher、子组件和事件监听=====> destroyed
生命周期图完成之后,根据这张图来写对应的代码: