第VI章-Ⅰ Vue3生命周期探讨

第VI章-Ⅰ Vue3生命周期探讨

  • 简介
  • Vue3生命周期概览
  • 生命周期钩子在选项式 API 中的使用
    • 错误捕获钩子 onErrorCaptured
  • 生命周期钩子在组合式 API 中的使用
    • 错误捕获钩子 onErrorCaptured
  • 总结

简介

在 Vue 3 中,生命周期钩子定义了组件在其创建、挂载、更新和销毁等过程中会执行的操作。这些钩子允许开发者在组件不同的阶段执行特定的代码逻辑。以下是 Vue 3 生命周期钩子的详细解释,以及如何在选项式 API 和组合式 API 中分别使用它们。

Vue3生命周期概览

  • beforeCreate:实例初始化之后,数据观测和事件配置之前。
  • created:实例创建完成,已经配置好数据观测、计算属性和方法,但尚未挂载 DOM。
  • beforeMount:在挂载之前被调用,在 render 函数首次被调用之前。
  • mounted:实例挂载完成,DOM 已经可访问。
  • beforeUpdate:在数据更新导致虚拟 DOM 重新渲染前被调用。
  • updated:数据更新导致虚拟 DOM 更新并重新渲染完成后调用。
  • beforeUnmount:实例被卸载之前调用。
  • unmounted:实例被卸载之后调用。
  • errorCaptured:当捕获一个来自子组件的错误时调用。

生命周期钩子在选项式 API 中的使用

选项式 API 中,生命周期钩子直接在组件对象上定义。

<template><div><h2>选项 API</h2><p>{{ message }}</p><button @click="updateMessage">Update Message</button></div>
</template><script>
export default {data() {return {message: 'Hello, Vue 3!'};},beforeCreate() {console.log('beforeCreate: 实例初始化之后');},created() {console.log('created: 实例创建完成');},beforeMount() {console.log('beforeMount: 挂载之前');},mounted() {console.log('mounted: 挂载完成');},beforeUpdate() {console.log('beforeUpdate: 更新之前');},updated() {console.log('updated: 更新完成');},beforeUnmount() {console.log('beforeUnmount: 卸载之前');},unmounted() {console.log('unmounted: 卸载完成');},methods: {updateMessage() {this.message = 'Message Updated!';}}
};
</script>

错误捕获钩子 onErrorCaptured

<template><div><h2>选项 API 错误捕获</h2><p v-if="errorMessage">{{ errorMessage }}</p><button @click="throwError">Throw Error</button></div>
</template><script>
export default {data() {return {errorMessage: ''};},methods: {throwError() {throw new Error('Test Error from Button');}},errorCaptured(err, instance, info) {this.errorMessage = `Error: ${err.message}`;console.log('Captured error:', err, 'In instance:', instance, 'Info:', info);return false; // 返回 false 会继续传播这个错误}
};
</script>

生命周期钩子在组合式 API 中的使用

组合式 API 中,生命周期钩子作为 Vue 中的导入函数,在 setup 函数中调用。

<template><div><h2>组合 API</h2><p>{{ message }}</p><button @click="updateMessage">Update Message</button></div>
</template><script setup lang="ts">
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';// 数据
const message = ref('Hello, Vue 3!');// 更新函数
const updateMessage = () => {message.value = 'Message Updated!';
};// 生命周期钩子
onBeforeMount(() => {console.log('onBeforeMount: 挂载之前');
});onMounted(() => {console.log('onMounted: 挂载完成');
});onBeforeUpdate(() => {console.log('onBeforeUpdate: 更新之前');
});onUpdated(() => {console.log('onUpdated: 更新完成');
});onBeforeUnmount(() => {console.log('onBeforeUnmount: 卸载之前');
});onUnmounted(() => {console.log('onUnmounted: 卸载完成');
});
</script>

错误捕获钩子 onErrorCaptured

import { ref, onMounted, onErrorCaptured } from 'vue';const errorMessage = ref('');onMounted(() => {// 模拟产生错误throw new Error('Test Error');
});onErrorCaptured((err, instance, info) => {errorMessage.value = `Error: ${err.message}`;console.log('Captured error:', err, 'In instance:', instance, 'Info:', info);return false; // 返回 false 会继续传播这个错误
});

总结

Vue 3 的生命周期钩子在选项式 API 和组合式 API 中都提供了强大的功能:

  • 选项式 API:生命周期钩子直接在组件对象上定义。
  • 组合式 API:生命周期钩子作为函数引入,并在 setup 函数中调用。

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

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

相关文章

设计模式学习笔记 - 项目实战三:设计实现一个支持自定义规则的灰度发布组件(实现)

概述 上两篇文章&#xff0c;我们讲解了灰度组件的需求和设计的思路。不管之前讲的限流、幂等框架&#xff0c;还是现在讲的灰度组件&#xff0c;功能性需求都不复杂&#xff0c;相反&#xff0c;非功能性需求是开发的重点。 本章&#xff0c;按照上篇文章的灰度组件的设计思…

网络基础「HTTPS」

✨个人主页&#xff1a; 北 海 &#x1f389;所属专栏&#xff1a; Linux学习之旅 &#x1f383;操作环境&#xff1a; CentOS 7.6 腾讯云远程服务器 文章目录 1.基本概念1.1.HTTP协议面临的问题1.2.加密与解密1.3.数字摘要1.4.数字签名 2.解决方案2.1.「对称式加密」2.2.「非对…

MySql#MySql数据库基础

目录 一、什么是数据库 二、主流数据库 三、基本使用 1.连接服务器 2.使用 1.查看你数据库 2.创建数据库 ​编辑 ​编辑 ​编辑​编辑 3.使用数据库 ​编辑 4.创建数据库表 5.表中插入数据 6.服务器&#xff0c;数据库&#xff0c;表之间的关系 四、MySQL架构…

【算法】深度优先搜索岛屿数量

1、题目描述 有一个由0和1组成的二维矩阵&#xff0c;其中1代表陆地&#xff0c;0代表水&#xff0c;岛屿由水平或垂直方向上相邻的陆地连接形成。 假设矩阵的四周均被水包围&#xff0c;请计算岛屿的数量。 输入&#xff1a;matrix [[1,1,0,0],[0,0,1,0],[0,0,0,0],[0,0,1,1],…

for...in 可以用const声明item

代码&#xff1a; function* foo() {yield 1;yield 2;yield 3;}const genr foo();for (const item of genr) {console.log(item);}for (const i 0; i < 5; i) {console.log("i", i);}在这两段代码中&#xff0c;尽管两者都包含 for 循环&#xff0c;但它们的用途…

如何在 Gin 框架中处理多个 websocket 连接?

在Gin框架中处理多个WebSocket连接&#xff0c;你可以使用gorilla/websocket包。以下是一步步的指南&#xff1a; 首先&#xff0c;在你的终端运行go get github.com/gorilla/websocket来安装gorilla/websocket包。 创建一个Connection结构体来保存WebSocket连接和发送通道。 …

Git在无法访问github的访问方法

Git无法下载github上的源代码 代理的情况 问题&#xff1a;Failed to connect to github.com port 443 after 21100 ms: Couldnt connect to server 提示我们需要为Git单独配置代理。 查看我们的代理端口  为git 设置全局代理 git config --global http.proxy 127.0.0.1:&l…

C++中的回溯搜索法(Backtracking)

回溯搜索法&#xff08;Backtracking&#xff09;是一种通过试错的方法来解决问题的策略。在C中&#xff0c;这种方法通常用于解决诸如组合问题、划分问题、排列问题等&#xff0c;尤其在涉及到约束满足问题&#xff08;CSP&#xff0c;Constraint Satisfaction Problem&#x…

在C++中二维数组初始化的几种不同方法

在 C 中初始化二维数组可以有几种不同的方法&#xff0c;这取决于你想要的数组类型和初始化数据的具体情况。以下是一些常用的初始化方法&#xff1a; 1. 静态初始化 如果你知道数组的大小和初始值&#xff0c;可以直接在声明时初始化。这种方法使用嵌套的大括号 {} 来逐行指…

Apache反代理Tomcat项目,分离应用服务器和WEB服务器

项目的原理是使用单独的机器做应用服务器&#xff0c;再用单独的机器做WEB服务器&#xff0c;从网络需要访问我们的应用的话&#xff0c;就会先经过我们的WEB服务器&#xff0c;再到达应用程序&#xff0c;这样子的好处是我们可以保护应用程序的机器位置&#xff0c;同时还可以…

LNMP一键安装包

LNMP一键安装包是什么? LNMP一键安装包是一个用Linux Shell编写的可以为CentOS/RHEL/Fedora/Debian/Ubuntu/Raspbian/Deepin/Alibaba/Amazon/Mint/Oracle/Rocky/Alma/Kali/UOS/银河麒麟/openEuler/Anolis OS Linux VPS或独立主机安装LNMP(Nginx/MySQL/PHP)、LNMPA(Nginx/MySQ…

代码随想录leetcode200题之链表

目录 1 介绍2 训练3 参考 1 介绍 本博客用来记录代码随想录leetcode200题中链表部分的题目。 2 训练 题目1&#xff1a;203移除链表元素 C代码如下&#xff0c; /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* Lis…

【学一点儿前端】Bad value with message: unexpected token `.`. 问题及解决方法

问题 今天从vue3的项目copy一段代码到vue2项目&#xff0c;编译后访问页面报错了 Bad value with message: unexpected token ..注意到错误字符‘.’&#xff0c;这个错误通常发生在处理 JavaScript 或者 HTML 中的动态表达式中&#xff0c;日常使用二分法不断缩小报错代码范…

JavaScript String indexOf() 方法

一、定义和用法&#xff1a; indexOf() 方法返回值在字符串中第一次出现的位置。 如果未找到该值&#xff0c;则 indexOf() 方法返回 -1。 indexOf() 方法区分大小写。 二、语法 string.indexOf(substring, start) 1、参数 substring必需。要搜索的字符串。start可选。开…

2024“天一永安杯“宁波第七届网络安全大赛极安云科战队部分WP

“天一永安杯”2024 宁波第七届网络安全大赛暨第九届大学生网络技术与信息安全大赛 大赛竞赛形式 一、线上初赛 参赛人员&#xff1a;各单位自行选拔3人&#xff08;设队长1名&#xff09;组成团队&#xff0c;不足3人不允许参赛。 竞赛时间&#xff1a;8&#xff1a;30-12&…

LLMs:《Better Faster Large Language Models via Multi-token Prediction》翻译与解读

LLMs&#xff1a;《Better & Faster Large Language Models via Multi-token Prediction》翻译与解读 目录 《Better & Faster Large Language Models via Multi-token Prediction》翻译与解读 Abstract 2、Method方法 Memory-efficient implementation 高效内存实…

IOS APP 常见UI控件

UILabel&#xff08;标签&#xff09;UITextField&#xff08;文本输入框&#xff09;UITextView&#xff08;文本视图&#xff09;UIButton&#xff08;按钮&#xff09;UIImageView&#xff08;图像视图&#xff09;UISwitch&#xff08;开关&#xff09;UIStepper&#xff0…

详解LLMOps,将DevOps用于大语言模型开发

大家好&#xff0c;在机器学习领域&#xff0c;随着技术的不断发展&#xff0c;将大型语言模型&#xff08;LLMs&#xff09;集成到商业产品中已成为一种趋势&#xff0c;同时也带来了许多挑战。为了有效应对这些挑战&#xff0c;数据科学家们转向了一种新型的DevOps实践LLM-OP…

python数据分析——在数据分析中有关概率论的知识

参数和统计量 前言一、总体二、样本三、统计抽样四、随机抽样4.1. 抽签法4.2. 随机数法 五、分层抽样六、整群抽样七、系统抽样八、统计参数九、样本统计量十、样本均值和样本方差十一、描述样本集中位置的统计量11.1. 样本均值11.2. 样本中位数11.3. 样本众数 十二、描述样本分…

windows和linux生成代码patch补丁

windows和linux生成代码patch补丁 如需转载请标明出处&#xff1a;http://blog.csdn.net/itas109 文章目录 windows和linux生成代码patch补丁前言1. .patch补丁2. 差异文件按目录结构导出到文件夹问题1. "Hunk #1 FAILED at 1 (different line endings)" 环境&#…