当前位置: 首页 > Web前端 > vue.js

Vue的生命周期_1

时间:2023-03-31 23:57:29 vue.js

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