当前位置：首页 > web >正文

钩子函数和参数：Vue组件生命周期中的自定义逻辑

web 2025/5/6 5:58:52

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

引言

在Vue中，钩子函数是一种特殊的函数，它们允许我们在组件的不同生命周期阶段执行自定义逻辑。钩子函数提供了一种机制来响应组件状态的变化，例如在组件创建、挂载、更新或销毁时执行代码。本文将介绍Vue中的钩子函数及其参数，并展示如何在实际开发中使用它们。

Vue组件的生命周期钩子

Vue组件有一系列的生命周期钩子，每个钩子都对应组件生命周期的一个特定阶段：

beforeCreate: 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created: 在实例创建完成后被立即调用。在这一步，实例已完成数据观测，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforeMount: 在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted: el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
beforeUpdate: 数据更新时调用，发生在虚拟 DOM 打补丁之前。
updated: 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
beforeUnmount (Vue 3): 在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的。
unmounted (Vue 3): 在卸载组件实例之后调用。在这个阶段，组件实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被卸载。

钩子函数的参数

大多数钩子函数不接受参数，但是它们都有访问组件实例 (this) 的能力，这意味着可以访问组件的数据、计算属性、方法等。

对于一些特定的钩子，如 beforeRouteEnter 和 beforeRouteUpdate (在Vue Router中使用)，它们会接受特定的参数：

to: 即将要进入的目标路由对象
from: 离开的路由对象
next: 一定要调用该方法来 resolve 这个钩子

使用钩子函数的示例

export default {data() {return {message: 'Hello, Vue!'};},created() {console.log('Component is created!');},mounted() {console.log('Component is mounted!');},beforeUpdate() {console.log('Component is about to update!');},updated() {console.log('Component has updated!');},beforeUnmount() {console.log('Component is about to be unmounted!');},unmounted() {console.log('Component has been unmounted!');}
};