vue生命周期

98 阅读1分钟
参考文档:

官网示意图:


各阶段处理内容:
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实例的所有东西都会解绑,所有的事件监听器会被移除,所有的子实例也会被销毁。