参考文档:
官网示意图:
各阶段处理内容:
beforeCreate :
创建一个vue实例
created:
初始化事件,进行data中数据的观测。此时还没有el选项,因此数据变化不会作用到dom元素中。
beforeMount:
查看是否存在el元素。
存在:继续编译,查看是否存在template元素,如果存在,则将其作为模板编译成render函数,如果不存在则使用通过el绑定的html元素作为模板编译。(此处可见template中的模板优先级高于outer html中模板)
不存在:停止编译,即停止了vue的生命周期,当在此vue实例上调用vm.$mounted(el)时继续生命周期。
mounted:
前一个阶段只是找到了渲染模板,模板内数据仍使用占位符,在mounted阶段前将数据渲染到dom模板中。
beforeUpdate:
vue发现data中的数据发生变化后触发beforeUpdate
updated:
对组建的重新渲染
beforeDestroy:
实例销毁之前,使用该钩子函数进行销毁之前的一些操作,处于该状态的实例仍然可用。
destroyed:
在实例销毁之后调用,调用后vue实例的所有东西都会解绑,所有的事件监听器会被移除,所有的子实例也会被销毁。