【Vue】关于Vue3的生命周期

news2024/9/20 10:29:38

目录

Vue3中新增了一个setup生命周期函数:(1) setup执行的时机是在beforeCreate生命周期函数之前执行,在setup函数中是不能通过this来获取实例的;(2) 为了命名的统一性,将beforeDestroy 改名为 beforeUnmount,destroyed 改名为 unmounted

在这里插入图片描述
生命周期函数

setup —— 不能通过this来获取实例
beforeCreate —— 建议使用setup来代替
created —— 建议使用setup来代替
beforeMount
mounted
beforeUpdate
updated
beforeUnmount
unmounted

新增加的生命周期函数(在setup中使用)可以在函数前加 on 来访问组件的生命周期

<script>
	import {onBeforeMount,onMounted,onBeforeUnmount,onUnmounted} from 'vue'
	export default {
		name:"AboutView",
		
		//生命周期钩子(新语法)
		setup(){
			console.log("setup------------------1");

			onBeforeMount(()=>{
				console.log("---onBeforeMount---")
			});
			onMounted(()=>{
				console.log("---onMounted---")
			});
			onBeforeUnmount(()=>{
				console.log("---onBeforeUnmount---")
			});
			onUnmounted(()=>{
				console.log("---onUnmounted---")
			})
		},

		//外面这些生命周期,旧语法虽然vue3也支持,感觉可以不用写了;只需要把setup中的钩子给它挂进去就已经够用了
		beforeCreate() {
			console.log("beforeCreate-----------------2")
		},
		created() {
			console.log("created-----------------3")
		},
		beforeMount() {
			console.log("beforeMount-----------------4")
		},
		mounted() {
			console.log("mounted-----------------5")
		},
		beforeUnmount() {
			console.log("beforeUnmount-----------------6")
		},
		unmounted() {
			console.log("unmounted-----------------7")
		},
	}

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

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

相关文章

MySQL数据库(初始上)

什么是MySQL MySQL是一个客户端——服务器结构的程序&#xff0c;MySQL的服务器是真正的本体&#xff0c;负责保存和管理数据&#xff0c;数据存储在硬盘上。数据库指的是逻辑上数据的集合&#xff0c;一个MySQL服务器上可以有很多表&#xff0c;把有关连的连到一起就构成了一…

SAP 免费学习网站推荐

1、https://www.guru99.com/ 可以看到有很多的开发语言可以学习。其中就有SAP。 点击SAP菜单后&#xff0c;可以看到每个模块的操作 每个模块下面都有操作的截图&#xff0c;结合翻译软件看的话很容易看懂 2、https://community.sap.com/ 这个是SAP官方的社区&#xff0c…

中国各县域城乡居民收入数据集(2000-2022年)

中国各县域的城乡居民收入是衡量地方经济社会发展水平的关键指标&#xff0c;对于理解区域内的经济活力、居民生活水平以及城乡差距具有重要意义。城镇居民人均可支配收入与农村居民人均可支配收入反映了不同群体的经济状况&#xff0c;前者通常较高&#xff0c;后者则可能受到…

Where I can save my openai-apikey safely for my flutter app

题意&#xff1a;我可以在哪里安全地保存我的 OpenAI API 密钥用于我的 Flutter 应用 问题背景&#xff1a; I am trying using ability of openai for my flutter app, but for now I dont have experience to save apikey safely and efficiently etc. I learned that I can…

【Canvas与电脑桌面壁纸】L形交错十字桌面(1920*1080)

【成图】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>L形交错十字桌面</title><style type"text/css"…

Linux_kernel驱动开发11

一、改回nfs方式挂载根文件系统 在产品将要上线之前&#xff0c;需要制作不同类型格式的根文件系统 在产品研发阶段&#xff0c;我们还是需要使用nfs的方式挂载根文件系统 优点&#xff1a;可以直接在上位机中修改文件系统内容&#xff0c;延长EMMC的寿命 【1】重启上位机nfs服…

业务架构解构与实践

往期回顾 >> CIO要懂业务架构&#xff0c;再谈业务架构的定义与作用&#xff0c;附业务架构教程下载 为什么要坚持先业务后IT&#xff1f;附71页PPT:企业架构及典型设计 为什么说“业务架构师”是ITBP的最佳人选&#xff1f; 业务架构之建模方法 业务架构的伴侣&…

线程安全问题和锁

所属专栏&#xff1a;Java学习 1. 线程的状态 新建&#xff08;New&#xff09;状态&#xff1a;当一个线程对象被创建&#xff0c;但还未调用 start () 方法启动时&#xff0c;处于新建状态。此时线程仅仅是一个 Java 对象&#xff0c;系统尚未为其分配资源。 就绪&am…

【生成模型系列(初级)】嵌入(Embedding)方程——自然语言处理的数学灵魂【通俗理解】

【通俗理解】嵌入&#xff08;Embedding&#xff09;方程——自然语言处理的数学灵魂 关键词提炼 #嵌入方程 #自然语言处理 #词向量 #机器学习 #神经网络 #向量空间模型 #Siri #Google翻译 #AlexNet 第一节&#xff1a;嵌入方程的类比与核心概念【尽可能通俗】 嵌入方程可以…

Model-based RL动态规划(基于价值、基于策略,泛化迭代)

白盒环境和黑盒环境 白盒环境&#xff1a;知道环境的状态转移函数P(s’|s)或P(s’|s,a)和奖励函数R(s)或R(s,a)&#xff1a;   白盒环境下的学习相当于直接给出了有监督学习的数据分布&#xff08;就是有了目标靶子&#xff09;&#xff0c;不需要采样了&#xff0c;直接最小…

电脑桌面文件删除了怎么找回来?别急,快速恢复攻略在此

在日常使用电脑的过程中&#xff0c;我们经常会遇到这样的情况&#xff1a;一不小心&#xff0c;桌面上的某个重要文件被删除了。这时&#xff0c;大多数人可能会感到惊慌失措&#xff0c;不知所措。 其实&#xff0c;不必过于担心&#xff0c;因为有很多方法可以帮助我们找回…

@开发者极客们,网易2024低代码大赛来啦

极客们&#xff0c;网易云信拍了拍你 9月6日起&#xff0c;2024网易低代码大赛正式开启啦&#xff01; 低代码大赛是由网易主办的权威赛事&#xff0c;鼓励开发者们用低代码开发的方式快速搭建应用&#xff0c;并最终以作品决出优胜。 从2022年11月起&#xff0c;网易低代码大赛…

构建数字产业生态链,共绘数字经济新蓝图

在当今数字化浪潮席卷全球的时代&#xff0c;构建数字产业生态链成为了推动经济发展的关键引擎。数字产业生态链如同一个强大的磁场&#xff0c;吸引着各类创新要素汇聚&#xff0c;共同描绘出数字经济的宏伟新蓝图。 数字产业生态链的核心在于融合与协同。它将软件开发、数据分…

【原创】java+springboot+mysql学生信息管理系统设计与实现

个人主页&#xff1a;程序猿小小杨 个人简介&#xff1a;从事开发多年&#xff0c;Java、Php、Python、前端开发均有涉猎 博客内容&#xff1a;Java项目实战、项目演示、技术分享 文末有作者名片&#xff0c;希望和大家一起共同进步&#xff0c;你只管努力&#xff0c;剩下的交…

如何在Visual Studio中调试.NET源码

今天偶然在看别人代码时&#xff0c;发现在他的代码里使用了Any判断List<T>是否为空。 我一般的做法是先判断是否为null&#xff0c;再判断Count。 看了一下Count的源码如下&#xff1a; 1 [__DynamicallyInvokable] 2 public int Count 3 { 4 [__…

做了十几个数字化项目后,我对数字化转型的思考

现在讲数字化转型多是自顶向下视角&#xff0c;但企业仅提战略、目标还不够&#xff0c;必须把任务分配到每个团队及个人每天的工作中&#xff0c;这些工作与员工以前的工作不同&#xff0c;意味着团队和员工也要转型。 企业数字化转型口号再响亮&#xff0c;若一线员工工作内…

如何使用gewechat开发微信机器人

简介&#xff1a;本文将指导你如何搭建一个微信机器人&#xff0c;通过接入gewe实现智能回复与聊天功能。我们将从基础设置开始&#xff0c;逐步讲解如何配置机器人&#xff0c;并通过实例展示其实际应用。 随着人工智能技术的不断发展&#xff0c;智能机器人已经成为我们日常…

传输层协议TCP

本篇详细的讲解了有关传输层协议中 TCP 的常见知识&#xff0c;其中主要包括&#xff1a;TCP 协议段格式、确认应答机制、超时重传机制、连接管理机制&#xff08;三次握手和四次挥手&#xff09;、TIME_WAIT 和 CLOSE_WAIT 状态、滑动窗口、流量控制、延迟应答、捎带应答、面向…

宠物空气净化器352和希喂哪个品牌比较好?352、希喂宠物空气净化器终极PK

家里猫咪掉毛太厉害了怎么办&#xff1f;我家长毛、短毛猫都有&#xff0c;短毛还是猫界蒲公英银渐层&#xff0c;不会再有比曾经的我更受掉毛困扰的铲屎官了&#xff01;我曾经为了减少我家猫咪掉毛&#xff0c;鱼油、维生素A、维生素B5、碘营养物质都在喂&#xff0c;没啥用&…

table表格左键双击,单元格可编辑效果

1) 效果&#xff0c;修改内容后数据同步修改: 2) 思路 1、el-table提供了左键双击事件。 2、左键双击后&#xff0c;该单元格更改为input框后&#xff0c;input框需要获取焦点。 3、输入内容后&#xff0c;(回车按钮或者点击其他位置input框失去焦点)&#xff0c;数据需要更…