vue的生命周期

Vue实例有一个完整的生命周期,从Vue实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期。生命周期钩子:就是生命周期事件的别名而已

每一个组件或者实例都会经历一个完整的生命周期,总共分为三个阶段:初始化、运行中、销毁。

一、创建期间的生命周期函数:

  1、beforeCreate:实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期,然后就会执行beforeCreate钩子函数,此时,还没有初始化好 data 和 methods 属性,无法访问到数据和真实的dom,一般不做操作

  2、created:挂载数据,绑定事件等等,然后执行created函数,实例已经在内存中创建OK,这个时候已经可以使用到数据,也可以更改数据,在这里更改数据不会触发updated函数,此时 data 和 methods 已经创建OK,此时还没有开始 编译模板

  3、beforeMount:接下来开始找实例或者组件对应的模板,编译模板为虚拟dom放入到render函数中准备渲染,然后执行beforeMount钩子函数,在这个函数中虚拟dom已经创建完成,此时已经完成了模板的编译,但是还没有挂载到页面中,在这里可以在渲染前最后一次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取

  4、mounted:开始render,渲染出真实dom,然后执行mounted钩子函数,此时,已经将编译好的模板,挂载到了页面指定的容器中显示,最早可以操作dom的时间段

二、运行期间的生命周期函数:

  5、beforeUpdate:状态更新之前执行此函数,当组件或实例的数据更改之后,会立即执行beforeUpdate, 此时 data 中的状态值是最新的,但是界面上显示的 数据还是旧的,因为此时还没有开始重新渲染DOM节点

  6、updated:实例更新完毕之后调用此函数,数据已经更改完成,dom也重新render完成,可以操作更新后的虚拟dom,此时 data 中的状态值 和 界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了!

三、销毁期间的生命周期函数:

  7、beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。一般在这里做一些善后工作,例如清除计时器、清除非指令绑定的事件等等

  8、destroyed:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。

posted @ 2019-07-05 16:51  浩浩啊  阅读(186)  评论(0编辑  收藏  举报