Vue实例有一个完整的生命周期,即开始创建->初始化数据->编译模板->挂载Dom->渲染->更新->卸载等一系列的过程,官网给出的图如下,外加大佬的一些注明。
-
beforeCreate:数据观测和初始化事件还未开始,此时data的响应式追踪、event/watcher都还没有被设置,也就是说不能访问到data、computed、watch、methods上的方法和数据。
-
created:实例创建完成,实例上配置的data、computed、watch、methods等都可以访问了,但此时渲染的节点还未挂载到DOM,所以不能访问到
$el
属性。 -
beforeMount:在挂载开始之前被调用,相关的render函数首次被调用。实例已完成模板的编译、把data里面的数据和模板生成html,但此时还未挂载html到页面上。
-
mounted:旧的
el
被新创建的vm.$el
替换,并在挂载到实例上去之后调用。实例已经完成了用上面编译好的html内容替换el属性指向的DOM对象,完成模板中的html渲染到html页面中。 -
beforeUpdate:响应式数据更新时调用,此时虽然响应式数据更新了,但对应的真实DOM还没有被渲染。
-
updated:在由于数据更改导致的虚拟DOM重新渲染时调用,此时DOM已经根据响应式数据的变化更新了。
-
beforeDestroy:实例销毁之前调用, 此时实例仍然可用,this仍然能获取到实例。
-
destroyed:实例销毁后调用,此时Vue实例的所有东西都会解除绑定。
以上是Vue创建、运行、更新到销毁的整个运行周期,除此之外对于生命周期还有activated
和deactivated
,这是在被keep-alive
包裹的组件才会有的两个生命周期。用keep-alive
包裹的组件在切换时不会进行销毁,而是缓存到内存中并执行deactivated
钩子函数,命中缓存渲染后会执行activated
钩子函数。