vue2.x与vue3.x生命周期的比较
vue2.x 生命周期图示:
new Vue()
|
v
Init Events & Lifecycle
|
v
beforeCreate
|
v
created
|
v
beforeMount
|
v
mounted
|
v
beforeUpdate (when data changes)
|
v
updated
|
v
beforeDestroy (when vm.$destroy() is called)
|
v
destroyed
vue3.x 生命周期图示:
setup()
|
v
Init Events & Lifecycle
|
v
onBeforeMount
|
v
onMounted
|
v
onBeforeUpdate (when data changes)
|
v
onUpdated
|
v
onBeforeUnmount (when component is unmounted)
|
v
onUnmounted
|
v
onErrorCaptured (when an error is captured)
vue 2.x 版本生命周期与 vue 3.x 版本生命周期相对应的组合式 API
- 2.x 版本使用
beforeCreate-> 3.x 版本使用setup() - 2.x 版本使用
created-> 3.x 版本使用setup() - 2.x 版本使用
beforeMount-> 3.x 版本使用onBeforeMount - 2.x 版本使用
mounted-> 3.x 版本使用onMounted - 2.x 版本使用
beforeUpdate-> 3.x 版本使用onBeforeUpdate - 2.x 版本使用
updated-> 3.x 版本使用onUpdated - 2.x 版本使用
beforeDestroy-> 3.x 版本使用onBeforeUnmount - 2.x 版本使用
destroyed-> 3.x 版本使用onUnmounted - 2.x 版本使用
errorCaptured-> 3.x 版本使用onErrorCaptured
vue 3.x 新增的钩子函数
组合式 API 还提供了以下调试钩子函数:
- onRenderTracked
- onRenderTriggered
vue 2.x 版本生命周期与 vue 3.x 版本生命周期示例代码:
<template>
<div class="about"><h2>msg: {{msg}}</h2><hr><button @click="update">更新</button>
</div>
</template><script lang="ts">
import {ref,onMounted,onUpdated,onUnmounted, onBeforeMount, onBeforeUpdate,onBeforeUnmount
} from "vue"export default {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')},setup() {const msg = ref('abc')const update = () => {msg.value += '--'}onBeforeMount(() => {console.log('--onBeforeMount')})onMounted(() => {console.log('--onMounted')})onBeforeUpdate(() => {console.log('--onBeforeUpdate')})onUpdated(() => {console.log('--onUpdated')})onBeforeUnmount(() => {console.log('--onBeforeUnmount')})onUnmounted(() => {console.log('--onUnmounted')})return {msg,update}}
}
</script>
<template><h2>App</h2><button @click="isShow=!isShow">切换</button><hr><Child v-if="isShow"/>
</template><script lang="ts">
import Child from './Child.vue'
export default {data () {return {isShow: true}},components: {Child}
}
</script>
相关文章:
vue2.x与vue3.x生命周期的比较
vue2.x 生命周期图示: new Vue() | v Init Events & Lifecycle | v beforeCreate | v created | v beforeMount | v mounted | v beforeUpdate (when data changes) | v updated | v beforeDestroy (when vm.…...
接口测试及常用接口测试工具(Postman/Jmeter)
🍅 点击文末小卡片 ,免费获取软件测试全套资料,资料在手,涨薪更快 首先,什么是接口呢? 接口一般来说有两种,一种是程序内部的接口,一种是系统对外的接口。 系统对外的接口…...
[论文阅读] SeeSR: Towards Semantics-Aware Real-World Image Super-Resolution
文章目录 一、前言二、主要贡献三、Introduction四、Methodology4.1 Motivation :4.2Framework Overview.** 一、前言 通信作者是香港理工大学 & OPPO研究所的张磊教授,也是图像超分ISR的一个大牛了。 论文如下 SeeSR: Towards Semantics-Aware Rea…...
Python实战进阶 No1: RESTful API - 基于Flask的实例说明
Python实战进阶 No1: RESTful API - 基于Flask的实例说明 RESTful API 是一种基于 REST(Representational State Transfer) 架构风格的 Web 服务接口设计规范。它使用 HTTP 协议的标准方法(如 GET、POST、PUT、DELETE 等)来操作资…...
Redis——优惠券秒杀问题(分布式id、一人多单超卖、乐悲锁、CAS、分布式锁、Redisson)
#想cry 好想cry 目录 1 全局唯一id 1.1 自增ID存在的问题 1.2 分布式ID的需求 1.3 分布式ID的实现方式 1.4 自定义分布式ID生成器(示例) 1.5 总结 2 优惠券秒杀接口实现 3 单体系统下一人多单超卖问题及解决方案 3.1 问题背景 3.2 超卖问题的…...
OpenCV机器学习(5)逻辑回归算法cv::ml::LogisticRegression
OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 cv::ml::LogisticRegression 是 OpenCV 机器学习模块中的一个类,用于实现逻辑回归算法。逻辑回归是一种广泛应用于分类问题的统计方法,特别适合二分类任务。…...
百度百舸 DeepSeek 一体机发布,支持昆仑芯 P800 单机 8 卡满血版开箱即用
在私有云环境中成功部署 DeepSeek 满血版并实现性能调优,并不是一件容易的事情。选择合适的 GPU 配置、安装相应的环境、成功部署上线业务、加速推理任务加速、支撑多用户并发 …… 完成业务测试,成功融入生产业务中。 为了帮助企业快速实现 DeepSeek 服…...
批处理效率提升技巧
在数据量大的后端应用程序中进行批处理(batch processing)是非常常见的需求,尤其是在需要处理大量数据或进行周期性任务时。批处理的目的是通过将数据分批次处理来提高效率,减少资源消耗,并确保应用程序的可伸缩性。以下是一些在这种场景下进行批处理的方法和实践: 一、…...
Kubernetes知识点总结(十)
什么是 K8s 的 namespace? 在 K8s 中,Namespace(名字空间)提供了一种机制,将同一集群中的资源划分为相互隔离的组, 是在多个用户之间划分集群资源的一种方法。 名字空间作用域仅针对带有名字空间的对…...
安全防御综合练习2 nat+智能选路
一、拓扑 二、需求 1、在企业出口防火墙上,设置一个“虚拟DNS服务器”,将内网用户的DNS设定为这个虚拟DNS服务器的地址 2、当内网用户发送DNS请求时,虚拟DNS服务器作为中间人,根据预配置算法,将DNS请求报文发送给各个…...
Flutter 中的数据跨层传递方案
在 Flutter 中,数据跨层传递(从父组件向子组件传递数据,或从子组件向父组件传递)有多种方案,主要包括以下几种: 1. 直接参数传递(Constructor 参数) 适用场景: 父组件向…...
代码随想录D50-51 图论 Python
理论基础 理论基础部分依然沿用代码随想录教程中的介绍: 图的种类 度 连通性 连通性用于表示图中节点的连通情况。 如果有节点不能到达其他节点,则为非连通图,想象将多个水分子表示为图,不考虑非键作用,这张图就不是…...
MyBatis进阶
日志的使用 我们在使用MyBatis的时候, 其实MyBatis框架会打印一些必要的日志信息, 在开发阶段这些日志信息对我们分析问题,理解代码的执行是特别有帮助的; 包括项目上线之后,我们也可以收集项目的错误日志到文件里面去; 所以我们采用专门的日志系统来处理. 步骤 导入坐标拷贝…...
容器化部署Kafka的最佳实践:基于KRaft模式的无ZooKeeper方案
一、docker 部署kafka单节点 1.1安装docker 可以参考这篇CentOS 7安装docker并配置镜像加速 1.3 运行kafka(注意修改zookeeper,kafka地址) docker run -d --name kafka -e KAFKA_ADVERTISED_LISTENERSPLAINTEXT://172.16.10.180:9092 -p …...
DeepSeek核心算法解析:如何打造比肩ChatGPT的国产大模型
注:此文章内容均节选自充电了么创始人,CEO兼CTO陈敬雷老师的新书《自然语言处理原理与实战》(人工智能科学与技术丛书)【陈敬雷编著】【清华大学出版社】 文章目录 DeepSeek大模型技术系列一DeepSeek核心算法解析:如何…...
LeetCode-633. 平方数之和
1、题目描述 给定一个非负整数 c ,你要判断是否存在两个整数 a 和 b,使得 a2 b2 c 。 示例 1: 输入:c 5 输出:true 解释:1 * 1 2 * 2 5示例 2: 输入:c 3 输出:f…...
前端面试技巧与实践
在当今快速发展的互联网行业中,前端开发已经成为了一个至关重要的角色。随着技术的不断进步和用户需求的日益复杂,前端工程师的职责不再仅仅是实现页面的布局和交互,而是需要具备全方位的技术能力和工程思维。根据2023年Stack Overflow的开发…...
windows Redis Insight 如何查看宝塔docker里的redis数据
1、ping 命令用于测试网络连通性,它只需要目标 IP 地址作为参数,不需要端口号。正确的命令如下: ping 公网地址2、使用 Telnet 测试端口连通性 telnet 公网地址 端口 telnet 47.108.67.228 6379如果连接成功,窗口会变为空白&am…...
sql数据执行失败,三个命令依次执行
set global innodb_strict_mode off set global.sql_mode ONLY_FULL_GROUP_BY,STRICT_TRANS_TABLES,ERROR_FOR_DIVISION_BY_ZERO,NO_ENGINE_SUBSTITUTION; set sql_mode ONLY_FULL_GROUP_BY,STRICT_TRANS_TABLES,ERROR_FOR_DIVISION_BY_ZERO,NO_ENGINE_SUBSTITUTION;...
BGP配置华为——RR反射器配置
实验拓扑 与之前实验同理将loop0作为routerID使用,且R1和R2上用loop1接口用于模拟用户其他网段 实验要求 1,在AS100内运行OSPF协议 2.配置路由反射器,使得从R1进入的数据能够反射到全局网络 3.在R1和R2上分别宣告自己的loop1口网段用于观…...
RestClient
什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端,它允许HTTP与Elasticsearch 集群通信,而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级ÿ…...
日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻
在如今就业市场竞争日益激烈的背景下,越来越多的求职者将目光投向了日本及中日双语岗位。但是,一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧?面对生疏的日语交流环境,即便提前恶补了…...
工业安全零事故的智能守护者:一体化AI智能安防平台
前言: 通过AI视觉技术,为船厂提供全面的安全监控解决方案,涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面,能够实现对应负责人反馈机制,并最终实现数据的统计报表。提升船厂…...
uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖
在前面的练习中,每个页面需要使用ref,onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入,需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...
Python ROS2【机器人中间件框架】 简介
销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...
JVM虚拟机:内存结构、垃圾回收、性能优化
1、JVM虚拟机的简介 Java 虚拟机(Java Virtual Machine 简称:JVM)是运行所有 Java 程序的抽象计算机,是 Java 语言的运行环境,实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息,使得 Java 程序只需生成在 JVM 上运行的目标代码(字节码),就可以…...
【笔记】WSL 中 Rust 安装与测试完整记录
#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统:Ubuntu 24.04 LTS (WSL2)架构:x86_64 (GNU/Linux)Rust 版本:rustc 1.87.0 (2025-05-09)Cargo 版本:cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...
08. C#入门系列【类的基本概念】:开启编程世界的奇妙冒险
C#入门系列【类的基本概念】:开启编程世界的奇妙冒险 嘿,各位编程小白探险家!欢迎来到 C# 的奇幻大陆!今天咱们要深入探索这片大陆上至关重要的 “建筑”—— 类!别害怕,跟着我,保准让你轻松搞…...
CRMEB 中 PHP 短信扩展开发:涵盖一号通、阿里云、腾讯云、创蓝
目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为:一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...
ZYNQ学习记录FPGA(一)ZYNQ简介
一、知识准备 1.一些术语,缩写和概念: 1)ZYNQ全称:ZYNQ7000 All Pgrammable SoC 2)SoC:system on chips(片上系统),对比集成电路的SoB(system on board) 3)ARM:处理器…...
