Vue 3 生命周期钩子详解(setup语法糖示例)

Vue 3 生命周期钩子详解(setup语法糖示例)

在Vue 3的框架下,生命周期钩子函数得到了全面的革新,并被巧妙地融入了setup函数中。这些钩子函数在组件实例的生命周期的不同阶段发挥着至关重要的作用。接下来,我们将探讨Vue 3的生命周期钩子,并通过setup语法糖的示例代码做演示。

Vue 3生命周期钩子

  • beforeCreatecreated:由于setup函数在组件实例初始化过程中早于这两个钩子被调用,因此在setup内部无法直接访问它们。
  • beforeMount:在组件实例即将被挂载到DOM树之前触发。
  • mounted:组件实例已成功挂载到DOM树上之后触发。
  • beforeUpdate:组件即将进行更新操作之前触发。
  • updated:组件完成更新操作之后触发。
  • beforeUnmount:组件实例即将从DOM树中卸载之前触发。
  • unmounted:组件实例已从DOM树中完全卸载之后触发。

示例代码

下面是一个简洁的Vue 3组件示例,使用setup语法糖展示其使用方法:

<template>  <div class="demo-container">  <h1>{{ message }}</h1>  <button @click="handleClick">点击更新消息</button>  </div>  
</template>  <script setup>  
import { ref, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';  // 定义一个响应式状态  
const message = ref('欢迎使用Vue 3!');  // 更新消息内容的函数  
const handleClick = () => {  message.value = '消息已更新!';  
};  // 组件挂载到DOM树上之后执行  
onMounted(() => {  console.log('组件已成功挂载!');  // 可在此处执行需要在组件挂载后完成的逻辑,例如数据请求等  
});  // 组件即将更新之前执行  
onBeforeUpdate(() => {  console.log('组件即将更新!');  // 可在此处执行需要在组件更新前完成的逻辑,例如取消网络请求等  
});  // 组件更新完成后执行  
onUpdated(() => {  console.log('组件已更新!');  // 可在此处执行需要在组件更新后完成的逻辑,例如DOM元素更新等  
});  // 组件即将从DOM树上卸载之前执行  
onBeforeUnmount(() => {  console.log('组件即将卸载!');  // 可在此处执行需要在组件卸载前完成的逻辑,例如清理定时器、取消事件监听等  
});  // 组件已从DOM树上完全卸载之后执行  
onUnmounted(() => {  console.log('组件已卸载!');  // 可在此处执行需要在组件卸载后完成的逻辑,例如清理全局变量等  
});  
</script>  <style scoped>  
/* 添加一些基本样式 */  
.demo-container {  text-align: center;  margin-top: 50px;  
}  
h1 {  color: #42b983;  
}  
button {  margin-top: 20px;  padding: 10px 20px;  font-size: 16px;  cursor: pointer;  
}  
</style>

总结

Vue 3通过提供更为简洁和灵活的API,极大地简化了组件生命周期的管理。结合setup语法糖和生命周期钩子,开发者能够轻松地在组件生命周期的不同阶段执行所需逻辑,从而构建出更加高效和易于维护的Vue应用。
希望本文的示例代码和详细解读能够帮助您深入理解Vue 3的生命周期钩子,并在实际开发中加以运用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/4242.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

vue2中使用vue-awesome-swiper实现轮播

swiper官方文档&#xff1a;Swiper中文网-轮播图幻灯片js插件,H5页面前端开发 1.安装 注意&#xff1a;swiper和vue-awesome-swiper的版本一定一定一定要相对应&#xff0c;版本对应如下&#xff1a; Swiper 5-6 vue-awesome-swiper4.1.1(vue2) Swiper 4.x vue-awesome-swi…

机器学习—神经网络中的层

大多数现代神经网络的基本组成部分是一层神经元&#xff0c;本篇文章中&#xff0c;你将学会如何构造一层神经元&#xff0c;一旦你把它放下&#xff0c;你就能把那些积木&#xff0c;把它们放在一起形成一个大的神经网络。 一层神经元是如何工作的&#xff1f; 下面是我们从…

51单片机教程(四)- 点亮LED灯

1、项目分析 让输入/输出口的P1.0连接一盏LED灯进行点亮。 2、技术准备 1 LED组成 ​ 说明 二极管有 P型 和 N型材料构成&#xff0c;通常是&#xff1a;硅/锗 掺杂其他元素&#xff08;硼、磷等&#xff09; 电子是带负电的&#xff0c;是负电荷的载体&#xff0c;电子流…

青训1_1105_03 最小替换子串长度

.md 文章目录 请添加图片描述一 问题描述测试样例示例 二 思路个人思路(ERROR)思路&#xff08;right&#xff09; !!解题思路 详细答案三、理解1、 理解嵌套循环:也就是连续子串的所有可能性位置-看懂了2、问题又来了&#xff0c;即使确定了能得到不同长度连续子串&#xff0c…

222页PPT集团公司供应链管理SOP计划管理流程规划

S&OP&#xff08;Sales & Operations Planning&#xff09;&#xff0c;即销售与运营计划&#xff0c;也被称为产销协同&#xff0c;是一种综合性的企业管理方法。以下是对S&OP计划管理流程规划的详细内容&#xff1a; 一、S&OP的基本概念与目的 S&OP是一…

第三十五篇:HTTP报文格式,HTTP系列二

HTTP 是超⽂本传输协议&#xff0c;也就是HyperText Transfer Protocol。 前面我们讲到第三章中网络协议的定义&#xff0c;网络协议的定义&#xff1a;网络协议是通信计算机双方必须共同遵从的一组约定。就像两个人要进行交流&#xff0c;如果不制定一套约定&#xff0c;一方…

华夏教育集团《梦回延安》全国巡演河南站纪实

传承红色精神&#xff0c;推动中国式家校共育。日前&#xff0c;由华夏教育集团太阳谷华夏学校携手河南少年先锋学校、世纪先锋学校联合推出的大型红色舞台剧《梦回延安》在河南省人民会堂精彩亮相。 河南是中华文明的发祥地之一&#xff0c;此次《梦回延安》舞台剧首次走出辽宁…

Idea如何推送项目到gitee

第一步&#xff1a;先在你的gitee创建一个仓库 第二步&#xff1a; 点击推送 点击定义远程&#xff0c;将URL换成你仓库的&#xff0c;填好你的用户名和密码 可以看到已经推送到仓库了

Leecode:977. 有序数组的平方

题目 ——Leecode:977. 有序数组的平方 目录 题目 ——Leecode:977. 有序数组的平方 题目分析 暴力解法&#xff1a; 双指针解法&#xff1a; 给你一个按 非递减顺序 排序的整数数组 nums&#xff0c;返回 每个数字的平方 组成的新数组&#xff0c;要求也按 非递减顺序 排…

动态规划-两个数组的dp问题——44.通配符匹配

1.题目解析 题目来源&#xff1a;44.通配符匹配——力扣 测试用例 2.算法原理 1.状态表示 本题属于两个数组的dp问题&#xff0c;这里需要使用p中的字符消去s中的字符且p中有特殊字符可以匹配s中的普通字符&#xff0c;属于寻找相同子序列的变式&#xff0c;所以需要一个二维d…

Linux命令 - 目录与文件基本操作

文章目录 1 文件系统树2 几个特殊的目录3 绝对路径与相对路径4 文件系统中跳转与浏览4.1 文件系统中跳转4.2 查看目录内容4.2.1 ls命令详解4.2.2 确定文件类型示例 5 操作目录与文件5.1 强大的通配符5.2 复制目录/文件5.3 移动/重命名目录/文件5.4 删除目录/文件5.5 创建目录5.…

基于STM32的自动化植物浇灌系统教学

引言 随着城市化进程的加快&#xff0c;越来越多的人开始关注家庭园艺与植物养护。基于STM32的自动化植物浇灌系统可以帮助用户在忙碌的生活中顺利管理植物的水分需求。本教学文章将指导您如何利用STM32构建一个简单实用的植物浇灌系统&#xff0c;实现自动浇水功能。 环境准备…

美格智能5G车规级通信模组: 5G+C-V2X连接汽车通信未来十年

自2019年5G牌照发放开始&#xff0c;经过五年发展&#xff0c;我国5G在基础设施建设、用户规模、创新应用等方面均取得了显著成绩&#xff0c;5G网络建设也即将从基础的大范围覆盖向各产业融合的全场景应用转变。工业和信息化部数据显示&#xff0c;5G行业应用已融入76个国民经…

【CRM系统选型指南:国内八大主流工具比较】

本文将对十大主流CRM系统进行比较&#xff1a;纷享销客、Zoho CRM、Pipedrive、简信CRM、HubSpot CRM、八百客CRM、金蝶CRM、浪潮CRM、销售易CRM 本文将深入评比2024年主流的CRM系统&#xff0c;帮助你了解各系统之间的主要区别、优缺点以及当前的发展趋势。通过详细的比较和分…

node.js的exports使用误区解释

exports和module.exports指向同一个对象&#xff0c;最终共享的结果&#xff0c;以module.exports指向的对象为准。 exports 和 module.exports 使用误区 使用require()导入的模块&#xff0c;使用的永远是module.exports指向的对象 实例1 exports.age 23 module.exports {n…

Maven项目的基础配置:利用IDEA将SpringBoot的项目打包成war文件

文章目录 引言Maven项目的聚合与继承(依赖管理)把项目打包成war包其他打包配置引言 利用IDEA将SpringBoot的项目打包成war文件Maven项目的聚合与继承(依赖管理)Maven项目的聚合与继承(依赖管理) 把项目打包成war包 利用IDEA将SpringBoot的项目打包成war文件:要配置启动…

Nuxt.js 应用中的 nitro:config 事件钩子详解

title: Nuxt.js 应用中的 nitro:config 事件钩子详解 date: 2024/11/2 updated: 2024/11/2 author: cmdragon excerpt: nitro:config 是 Nuxt 3 中的一个生命周期钩子,允许开发者在初始化 Nitro 之前自定义 Nitro 的配置。Nitro 是 Nuxt 3 的服务器引擎,负责处理请求、渲…

51c大模型~合集14

我自己的原文哦~ https://blog.51cto.com/whaosoft/11603879 # LLM 结构化数据生成原理 如何结合人工规则让 LLM 输出符合 JSON 格式的数据。 目前 LLM&#xff08;Large Language Model&#xff09;从文本补全到内容创作&#xff0c;都展示出了强大的生成能力。然而通过 L…

CSRA的LINUX操作系统24年11月2日下午上课笔记

压缩和解压缩&#xff1a;zip 、gzip、bz、xz # zip 压缩 # 压缩文件夹 # 解压缩 # unzip -v 查看压缩包中的内容 # bzip2 dir1/* :将dir1中的所有文件压缩 # gzip # 压缩文件夹 # 解压缩 tar 归档命令&#xff1a; # 创建tar包 tar -c*f # 释放tar包 tar -xf[c] # c …

MyBatis 返回 Map 或 List<Map>时,时间类型数据,默认为LocalDateTime,响应给前端默认含有‘T‘字符

一、问题 MyBatis 返回 Map 或 List时&#xff0c;时间类型数据&#xff0c;默认为LocalDateTime Springboot 响应给前端的LocalDateTime&#xff0c;默认含有’T’字符&#xff0c;如何统一配置去掉 二、解决方案 1、创建配置类&#xff0c;对ObjectMapper对象进行定制&am…