首先，先展示官方的Vue生命周期钩子函数的图示
Vue生命周期钩子函数图示.png
在Vue2.0+版本，一个Vue实例共有以下八个生命周期钩子函数
beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestorydestoryed
Lifecycle_hooks.png
beforeCreate
在实例初始化之后，但是el和data并未初始化
created
完成了data的初始化，但是el并没有初始化
beforeMount
完成了el和data的初始化
在挂载开始之前被调用：相关的render函数首次被调用。
mounted
完成挂载,el 被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子
简单来说就是更新el所控制区域的编译模板
beforeUpdate
数据更新时调用，发生在虚拟DOM打补丁之前
updated
当这个钩子被调用时，组件DOM已经更新，一般情况下，可以用计算属性computed或watch代替
beforeDestory
实例销毁之前调用。在这一步，实例仍然完全可用。
destoryed
Vue实例销毁后调用。调用后,Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
网友评论