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

vue组件的生命周期

时间:2023-03-31 16:02:38 vue.js

Vue的所有生命周期钩子都会自动绑定到这个上下文中的实例上,所以你可以访问数据,对属性和方法进行操作。这意味着您不能使用箭头函数来定义生命周期方法。这是因为箭头函数绑定到父上下文,所以这不是您期望的Vue实例。可以在此处找到详细说明。1.beforeCreate  在实例初始化(newVue())之后,数据观察和event/watcher事件配置之前被调用。2.创建完实例后调用Created  。在这一步中,实例完成了以下配置:数据观察、属性和方法的操作、watch/event事件回调。但是,挂载阶段尚未开始,el属性目前不可见。3.beforeMount在挂载开始前被调用:第一次调用相关的render函数。服务器端渲染期间不会调用此挂钩。4、mountedel被新创建的vm.$el代替,挂在实例上后调用hook函数。如果根实例挂载文档内元素,则vm.$el在调用mounted时也在文档内。服务器端渲染期间不会调用此挂钩。5.beforeUpdate在数据更新时调用,在虚拟DOM重新渲染和修补之前。可以在此挂钩中进行进一步的状态更改,这不会触发额外的重新渲染过程。服务器端渲染期间不会调用此挂钩。6.updated该钩子会在虚拟DOM由于数据变化而重新渲染和打补丁后被调用。调用此挂钩时,组件DOM已更新,因此您现在可以执行依赖于DOM的操作。然而,在大多数情况下,您应该避免在此期间更改状态,因为这可能会导致更新无限循环。服务器端渲染期间不会调用此挂钩。7.activatedkeep-alive组件激活时调用。服务器端渲染期间不会调用此挂钩。8.deactivatedkeep-alive组件去激活时调用。服务器端渲染期间不会调用此挂钩。9.beforeDestroy【类似React生命周期的componentWillUnmount】在实例销毁之间调用。在这一步,实例仍然完全可用。服务器端渲染期间不会调用此挂钩。10.destroyedVue实例销毁后调用。调用后,Vue实例所指示的一切都将被解除绑定,所有事件监听器将被移除,所有子实例将被销毁。服务器端渲染期间不会调用此钩子。