Vue的生命周期

vue的生命周期大体分为四个阶段(过程),创建-挂载-更新-销毁。
beforeCreate、create、beforeMount、mounted、beforeUpdate、
update、beforeDestroy、destroyed、activated、deactivated,
其中前八个较为常用,最后两个一般应用于
beforeCreate 创建前,此阶段为实例化初始之后,this指向创建的实例,此时数据观察的机制都未形成,不能获得DOM节点,data,computed,watch、methods上的方法和数据均都不能访问。
created 创建后,此阶段实例已经创建,完成数据(data、props、computed)的初始化导入依赖项,可以访问data、computed。watch、methods上的方法和数据。
beforeMount 挂载前,虽然得不到具体的DOM元素,但vue的根节点已经创建,下面vue对DOM的操作将围绕这个根元素继续进行。
mounted 挂载,完成创建vm.$el和双向数据绑定,完成DOM挂载和渲染,可以在此函数过程对挂载的DOM进行操作,例如请求后端拿回数据,配合路由钩子处理一些事情。
beforeUpdate 数据更新前,可以在更新前访问现有的DOM,例如手动移除添加的事件监听器。
updated 数据更新,完成虚拟DOM的重新渲染。
activated 在使用vue-router事有时需要使用来缓存组件状态,此时created钩子不会被重复触发,如果子组件需要在每次加载的时候进行操作,可以使用activated钩子触发。
deactiated 被移除是使用。
beforeDestroy 销毁前,可以做一些删除提示,例如,您确定要删除xx吗?
destroyed 销毁后,当前组件已经删除,销毁监听事件、组件、子实例也被销毁,此时无法操作里面的任何东西。
执行顺序:
父组件开始执行到beforeMount 然后开始子组件执行,最后是父组件mounted。
如果有兄弟组件,父组件开始执行到beforeMount,然后兄弟组件依次执行到beforeMount,然后按照顺序执行mounted,最后执行父组件的mounted。
当子组件挂载完成后,父组件才会挂载。
当子组件完成挂载后,父组件会主动执行一次beforeUpdate/updated钩子函数(仅首次)
父子组件在data变化中是分别监控的,但是更新props中的数据是关联的。
销毁父组件时,会先销毁子组件。
兄弟组件的初始化(mounted之前)是分开进行的,挂在是从上到下依次进行。
当没有数据关联时,兄弟组件之间的更新和销毁是互不关联的。

你可能感兴趣的