首先,先展示官方的Vue生命周期钩子函数的图示
在Vue2.0+版本,一个Vue实例共有以下八个生命周期钩子函数
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestory
destoryed
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
实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。