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.mzph.cn/bicheng/59492.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

neo4j浅析

一、py2neo 1.基本范式&#xff08;连接数据库&#xff09; from py2neo import Graph """ host:服务器ip地址&#xff0c;默认为localhost http_port:http协议——服务器监听端口&#xff0c;默认7474 https_port:https协议——服务器监听端口&#xff0c;默…

verilog-HDL

目录 用户自定义元件 层次化设计方法 模块例化方法 生成语句 用户自定义元件 Verilog HDL定义的基元都具有固定的功能。为了应用方便&#xff0c;Verilog还支持用户自定义原语&#xff08;User-Defined Primitive&#xff0c;简称UDP&#xff09;&#xff0c;即允许设计者根据…

机器学习(二)——线性回归模型、多分类学习(附核心思想和Python实现源码)

目录 关于1. 基本形式2. 线性回归2.1 单变量线性回归2.2 多元线性回归2.2 对数线性回归 3. 对数几率回归4. 线性判别分析5. 多分类学习5.1 拆分策略 6. 类别不平衡问题X 案例代码X.1 源码X.2 数据集&#xff08;糖尿病数据集&#xff09;X.3 模型效果 关于 本文是基于西瓜书&a…

跳表原理笔记

课程地址 跳表是一种基于随机化的有序数据结构&#xff0c;它提出是为了赋予有序单链表以 O(logn) 的快速查找和插入的能力 创建 首先在头部创建一个 sentinel 节点&#xff0c;然后在 L1 层采用“抛硬币”的方式来决定 L0 层的指针是否增长到 L1 层 例如上图中&#xff0c;L…

wpf 制作丝滑Flyout浮出侧边栏Demo (Mahapps UI框架)

Flyout 属性 CloseButtonVisibility: 设置为 Collapsed&#xff0c;意味着关闭按钮不可见。TitleVisibility: 设置为 Collapsed&#xff0c;意味着标题不可见。IsPinned: 设置为 True&#xff0c;意味着这个 Flyout 会固定住&#xff0c;不会自动关闭。Opacity: 设置为 1&…

Redis常见面试题概览——针对实习面试

目录 1. Redis基础2. Redis数据类型3. Redis多机与分布式4. Redis事务5. Redis性能和优化6. Redis应用场景7. Redis三大生产问题8. Redis客户端和连接 以下是Redis常见面试题的概览&#xff1a; 1. Redis基础 什么是Redis&#xff1f;Redis与其他key-value存储有什么不同&…

MySQL记录锁、间隙锁、临键锁(Next-Key Locks)详解

行级锁&#xff0c;每次操作锁住对应的行数据。锁定粒度最小&#xff0c;发生锁冲突的概率最低&#xff0c;并发度最高。 应用在InnoDB存储引擎中。InnoDB的数据是基于索引组织的&#xff0c;行锁是通过对索引上的索引项加锁来实现的&#xff0c;而不是对记录加的锁。 对于行…

GeoSever发布图层(保姆姬)

发布服务的具体步骤。 1. 安装 GeoServer 下载 GeoServer 安装包&#xff1a;GeoServer 官网按照安装说明进行安装&#xff0c;可以选择 Windows、Linux 或其他平台。 2. 启动 GeoServer 启动 GeoServer 通常通过访问 http://localhost:8080/geoserver 进行。默认用户名和密…

Hugging Face 两种加载模型的方式有什么区别

在 Hugging Face 上&#xff0c;这两种加载模型的方式有一些关键区别&#xff0c;并会影响后续的使用。 方式 1&#xff1a;使用 pipeline 高层次 API from transformers import pipelinepipe pipeline("text-generation", model"defog/sqlcoder-70b-alpha&q…

【LeetCode】【算法】139. 单词拆分

LeetCode 139. 单词拆分 题目 给你一个字符串s和一个字符串列表wordDict作为字典。如果可以利用字典中出现的一个或多个单词拼接出s则返回true。 注意&#xff1a;不要求字典中出现的单词全部都使用&#xff0c;并且字典中的单词可以重复使用。 示例&#xff1a; 输入: s “…

在离线环境中使用sealos工具快速部署一套高可用的k8s服务集群

文章目录 项目基础信息工具版本测试环境 下载资源文件下载sealos二进制命令文件下载k8s安装镜像和组件资源下载docker离线安装包下载Docker Registry容器镜像 NFS共享配置coredns服务的DNS解析配置安装配置sealos、k8s服务安装sealos工具导入k8s及相关组件镜像安装 K8s 集群部署…

交易所开发:构建安全、高效、可靠的数字资产交易平台

随着数字资产的不断发展&#xff0c;数字货币交易所作为连接数字资产与现实世界的重要桥梁&#xff0c;逐渐成为全球金融市场的核心组成部分。无论是比特币、以太坊等主流加密货币&#xff0c;还是各种基于区块链的资产&#xff0c;都需要通过交易所进行交换和流通。因此&#…

了解分布式数据库系统中的CAP定理

在分布式数据库系统的设计和实现中&#xff0c;CAP定理是一个至关重要的概念。CAP定理&#xff0c;全称为一致性&#xff08;Consistency&#xff09;、可用性&#xff08;Availability&#xff09;和分区容忍性&#xff08;Partition tolerance&#xff09;定理&#xff0c;由…

RabbitMQ应用问题

1. 幂等性保障 1.1 介绍 幂等性是数学和计算机科学中某些运算的性质, 它们可以被多次应⽤, ⽽不会改变初始应⽤的结果. 在应⽤程序中, 幂等性就是指对⼀个系统进⾏重复调⽤(相同参数), 不论请求多少次, 这些请求对系统的影响都是相同的效果. ⽐如数据库的 select 操作. 不同…

HTB:Sense[WriteUP]

目录 连接至HTB服务器并启动靶机 1.What is the name of the webserver running on port 80 and 443 according to nmap? 使用nmap对靶机TCP端口进行开放扫描 2.What is the name of the application that presents a login screen on port 443? 使用浏览器访问靶机80端…

【LeetCode每日一题】——802.找到最终的安全状态

文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【题目提示】七【解题思路】八【时空频度】九【代码实现】十【提交结果】 一【题目类别】 图 二【题目难度】 中等 三【题目编号】 802.找到最终的安全状态 四【题目描述】 有一个有…

stm32使用串口的轮询模式,实现数据的收发

------内容以b站博主keysking为原型&#xff0c;整理而来&#xff0c;用作个人学习记录。 首先在STM32CubeMX中配置 前期工作省略&#xff0c;只讲重点设置。 这里我配置的是USART2的模式。 会发现&#xff0c;PA2和PA3分别是TX与RX&#xff0c;在连接串口时需要TX对RX&…

C++上机实验|继承与派生编程练习

1.实验目的 (1) 掌握派生与继承的概念与使用方法 (2) 运用继承机制对现有的类进行重用。 (3) 掌握继承中的构造函数与析构函数的调用顺序, (4) 为派生类设计合适的构造函数初始化派生类。 (5) 深入理解继承与组合的区别。 2.实验内容 设计一个人员类 person 和一个日期类 da…

【MySQL】 运维篇—故障排除与性能调优:案例分析与故障排除练习

理论知识及概念介绍 1. 故障排除的重要性 无论是电商平台、社交网络还是企业管理系统&#xff0c;数据库的稳定性和性能直接影响到用户体验和业务运作。因此&#xff0c;及时发现并解决数据库故障是确保系统高可用性和可靠性的关键。 2. 应用场景 电商平台&#xff1a;在大促…

【STL_list 模拟】——打造属于自己的高效链表容器

一、list节点 ​ list是一个双向循环带头的链表&#xff0c;所以链表节点结构如下&#xff1a; template<class T>struct ListNode{T val;ListNode* next;ListNode* prve;ListNode(int x){val x;next prve this;}};二、list迭代器 2.1、list迭代器与vector迭代器区别…