Vue.js是一个用于构建用户界面的渐进式框架，它的核心库主要关注视图层，易于与其他库或已有项目整合，Vue.js提供了一种简单的方法来声明组件，使得组件的定义更加直观且易于复用，在Vue中，组件生命周期钩子函数允许你在特定的时间点执行代码，这对于管理组件的状态和行为至关重要，本文将详细介绍Vue的生命周期钩子函数，帮助你更好地掌握不同阶段的实现，从而实现更好的组件管理。
1. beforeCreate
在实例初始化之后、数据观测 (data observer) 和 event/watcher 事件配置之前被调用，还没有进行数据观测和事件监听，所以无法访问到 DOM，但是可以访问到 data 对象。
beforeCreate() {
console.log('beforeCreate');
}
2. created
在实例创建完成后被立即调用，在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算，watch/event事件回调，挂载阶段还没开始，$el属性目前不可见。
created() {
console.log('created');
}
3. beforeMount
在挂载开始之前被调用：相关的 render 函数首次被调用。
beforeMount() {
console.log('beforeMount');
}
4. mounted
实例挂载到 DOM 后调用该钩子，如果实例被挂载到一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内，此钩子函数只会被调用一次。
mounted() {
console.log('mounted');
}
5. beforeUpdate
数据更新时调用，发生在虚拟DOM重新渲染和打补丁之前，可以在该钩子中进一步地更改状态，这不会触发附加的重渲染过程。
beforeUpdate() {
console.log('beforeUpdate');
}
6. updated
由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用，调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作，然而在大多数情况下，应避免在此期间更改状态，该钩子函数可能会多次被调用。
updated() {
console.log('updated');
}
7. beforeDestroy
实例销毁之前调用，在这一步，实例仍然完全可用，Vue 会在这个阶段执行一些清理操作，比如移除指令、解绑事件等，你可以在该钩子中放置任何需要在实例销毁之前执行的逻辑，但是请注意，服务器端渲染期间不会有 $destroy 事件，所以如果你需要在这些情况下取消异步请求，你应该使用 nextTick。
beforeDestroy() {
console.log('beforeDestroy');
}
8. destroyed
Vue 实例销毁后调用，调用后，所有的事件监听器会被移除，所有的子实例也会被销毁，Vue 实例将不再响应数据绑定，但仍然可以访问已挂载的属性和方法，如果你需要在组件销毁后执行一些逻辑，请在该钩子中进行，通常在这一步也可以进行一些资源释放的操作，比如关闭定时器、清除定时器等。
destroyed() {
console.log('destroyed');
}
9. activated、deactivated、beforeDeactivated、deactivated、beforeDeactivated、errorCaptured、serverPrefetch、clientPrefetch、ready、waiting、updated、willUnmount、unmounted、beforeUnmount、destroyed、adjustErrorCapturedOffsets、caughtError、errorHandlerAdded、errorHandlerRemoved、renderTracked、renderTriggered、beforeMountComponent、mountedComponent、beforeUpdateComponent、updatedComponent、beforeUpdateChildComponent、updatedChildComponent、beforeUnmountComponent、unmountedComponent、beforeDestroyComponent、destroyedComponent、activatedChildComponent、deactivatedChildComponent、passiveUpdatesEnabledChanged这些生命周期钩子在本篇文章中并未详细介绍，但它们在实际开发中也是非常有用的，了解这些钩子可以帮助你更好地管理组件的状态和行为。
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/26266.html
微信扫一扫 