vue3前端开发,生命周期函数的基础练习

vue3前端开发,生命周期函数的基础练习!

下面先给大家看一个图片,帮助大家了解,vue3的生命周期函数,和旧版本vue2的生命周期函数,有什么变化。

如图所示,vue3里面,把前面2个函数,混在了语法糖里面。我们 只需要写一个setup就行了。

生成之前,和生成之后。需要准备的事情,无外乎就是数据的准备工作。

下面看看代码案例。我们以onMounted为案例,展示一下。生命周期函数,其实是可以多次调用的。


<script setup>
/*** 补充:* vue3的版本,把vue2版本的生成之前,和生成之后,这2个钩子函数,改成了语法糖setup。* */
//1:   引入生命周期函数
import {onMounted} from 'vue'
//2:   调用函数
onMounted(()=>{console.log('mounted1');
}),
onMounted(()=>{console.log('mounted3');
})
onMounted(()=>{console.log('mounted2');
})
</script>
<template><h3>组件的生命周期练习-vue3</h3>
</template>

以上代码是,我们定义了一个组件,名字叫做LifeDemo.vue。


<template><h3>入口文件</h3><!-- <Base /> --><!-- <SetupDemo /> --><!-- <ReactiveDemo /> --><!-- <ComputedDemo /> --><!-- <WatchDemo2 /> --><!-- <MutationsDemo /> -->
<LifeDemo />
</template><script setup>
import Base from './components/Base.vue'
import SetupDemo from './components/SetupDemo.vue'
import ReactiveDemo from './components/ReactiveDemo.vue'
import ComputedDemo from './components/ComputedDemo.vue'
import WatchDemo from './components/WatchDemo.vue'
import MutationsDemo from './components/MutationsDemo.vue'
import WatchDemo2 from './components/WatchDemo2.vue'
import LifeDemo from './components/LifeDemo.vue'
</script>

以上代码是入口文件,我们做了组件的注册,就可以在页面内看见了。

如图所示,我们在页面挂载完成后,触发了三个控制台打印。顺序和我们在代码内写的顺序是一致的。

这样多次调用生命周期函数是,可以避免的对之前旧代码的修改造成一些不必要的软件故障。

我们可以自己追加一些 自己想做的逻辑操作。不会影响之前的旧代码逻辑。

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

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

相关文章

再不学Python就晚了!——2023年度总结:市场需求最大的8种编程语言!

众所周知&#xff0c;编程语言的种类实在是太多了。直到现在&#xff0c;经常还会看到关于编程语言选择和学习的讨论。 虽说编程语言有好几百种&#xff0c;但实际项目使用和就业要求的主流编程语言却没有那么多。 大家可能也会好奇&#xff1a;现如今就业市场上到底什么编程…

【C++】Qt:QCustomPlot图表绘制库配置与示例

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍QCustomPlot图表绘制库配置与示例。 学其所用&#xff0c;用其所学。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#xff0c;下次…

【网站项目】新冠疫情隔离人员信息管理系统(有源码)

🙊作者简介:多年一线开发工作经验,分享技术代码帮助学生学习,独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。🌹赠送计算机毕业设计600个选题excel文件,帮助大学选题。赠送开题报告模板,帮助书写开题报告。作者完整代码目录供你选择: 《Springboot网站项目…

kingbase常用SQL总结之锁等待信息

锁信息与等待事件 分析kingbase&#xff08;pg&#xff09;数据库锁等待、死锁时需要我们准确的定位等锁或者死锁相关的事务。关于获取锁等待信息或者死锁信息已有经典的SQL可以直接使用&#xff0c;但是需要我们先了解sql语句获取的每个字段的意义。 获取到锁等待事务不能完全…

C++之函数名后面的const

在 C 中&#xff0c;函数名后面加上const 关键字表示该函数不会修改对象的成员变量(除非成员变量是mutable的)。这是一种良好的编程习惯&#xff0c;可以提高代码的安全性和可读性。 在这个例子中&#xff0c;internalWinId() 和 effectiveWinId() 都被声明为 const,这意味着它…

【Linux与windows的文件互相传输】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言 关于 rzsz 注意事项 查看软件包 使用命令 下载到本地&#xff08;使用sz的命令&#xff09; 本地文件上传到Linux中&#xff08;使用rz命令&#xff09; 方法一…

【立创EDA-PCB设计基础】3.网络表概念解读+板框绘制

前言&#xff1a;本文对网络表概念解读板框绘制&#xff08;确定PCB板子轮廓&#xff09; 网络表概念解读 在本专栏的上一篇文章【嘉立创EDA-PCB设计指南】2&#xff0c;将设计的原理图转为了PCB&#xff0c;在PCB界面下出现了所有的封装&#xff0c;以及所有的飞线属性&…

Minio 判断对象是否存在

引 Minio数据模型 中描述了 MinIO 中什么是桶&#xff0c;什么是对象&#xff0c;也给出了操作桶和操作对象的API。 在 MinIO 中&#xff0c; 对象 中间前缀 对象名称 。如何判定对象是否存在呢&#xff1f; 分析 在 MinIO 中并没有提供判断对象是否存在的操作&#xff…

React16源码: React中的updateHostComponent的源码实现

updateHostComponent 1 &#xff09;概述 在 completeWork 阶段的 HostComponent 处理&#xff0c;继续前文所述在更新的逻辑里面&#xff0c;调用了 updateHostComponent进行前后props对应的dom的attributes变化的对比情况这个方法也是根据不同环境来定义的&#xff0c;我们这…

Python基础之文件操作(I/O)

和其他编程语言一样&#xff0c;Python 也具有操作文件&#xff08;I/O&#xff09;的能力&#xff0c;比如打开文件、读取和追加数据、插入和删除数据、关闭文件、删除文件等。合理应用python提供的文件操作基本函数&#xff0c;可大大提高自动化实现的效率与框架代码的稳定性…

C++ | 六、栈 Stack、队列 Queue

栈的基础知识 栈&#xff08;stack&#xff09;是一种数据结构&#xff0c;在C中属于STL&#xff08;标准库&#xff09;特点&#xff1a;先进后出 栈的使用&#xff1a; 一、引入头文件<stack>二、创建栈变量&#xff08;类似容器、集合的创建方式&#xff09;&#xf…

C++实现函数重载的原理

一、函数重载的概念 C中允许存在同名函数&#xff0c;但要求函数参数的类型、个数不同&#xff0c;这些同名函数就称为函数的重载。 void func(int a, int b) {cout << "func(int a, int b)" << endl; }void func(double a, double b) {cout << …

【Linux】Linux编译器-gcc/g++使用

1. 背景知识 预处理&#xff08;进行宏替换) 编译&#xff08;生成汇编) 汇编&#xff08;生成机器可识别代码&#xff09; 连接&#xff08;生成可执行文件或库文件) 2. gcc如何完成 格式 gcc [选项] 要编译的文件 [选项] [目标文件] 预处理(进行宏替换) 预处理功能主要包括…

【Linux】-对于信号章节补充的知识点,以及多线程知识的汇总

&#x1f496;作者&#xff1a;小树苗渴望变成参天大树&#x1f388; &#x1f389;作者宣言&#xff1a;认真写好每一篇博客&#x1f4a4; &#x1f38a;作者gitee:gitee✨ &#x1f49e;作者专栏&#xff1a;C语言,数据结构初阶,Linux,C 动态规划算法&#x1f384; 如 果 你 …

【shell-09】 shell控制台颜色输出

echo -e echo -e 一个重要的小例子和换行符控制字符一样&#xff0c;终端颜色也有自己的十进制控制符颜色的写法颜色参考图表 echo -e 一个重要的小例子 echo -e 的意思&#xff1a;如果字符串中出现某些特定的字符组合&#xff08;转义字符&#xff09;&#xff0c;echo会将这…

大模型学习与实践笔记(十二)

使用RAG方式&#xff0c;构建opencv专业资料构建专业知识库&#xff0c;并搭建专业问答助手&#xff0c;并将模型部署到openxlab 平台 代码仓库&#xff1a;https://github.com/AllYoung/LLM4opencv 1&#xff1a;创建代码仓库 在 GitHub 中创建存放应用代码的仓库&#xff…

DAY08_SpringBoot—整合Mybatis-Plus

目录 1 MybatisPlus1.1 MP介绍1.2 MP的特点1.3 MybatisPlus入门案例1.3.1 导入jar包1.3.2 编辑POJO对象1.3.3 编辑Mapper接口1.3.4 编译YML配置文件1.3.5 编辑测试案例 1.4 MP核心原理1.4.1 需求1.4.2 原理说明1.4.3 对象转化Sql原理 1.5 MP常规操作1.5.1 添加日志打印1.5.2 测…

电脑存储位置不够怎么办

电脑内存不够怎么办&#xff01;&#xff01;&#xff01; 我前段时间经常因为电脑D盘内存不够而苦恼&#xff08;毕竟电脑内存就那么丁点&#xff0c;C盘作为系统盘不能随便下东西的情况下&#xff0c;就只能选择其他盘进 方法一&#xff1a;检查电脑硬盘的分区情况&#xf…

全国大学生智能汽车竞赛—解决Ubuntu 18.04.6 无法连接网络的问题

1.1 用到的命令 lshw &#xff08;1&#xff09;功能描述: lshw是一个提取机器硬件配置详细信息的工具&#xff0c;并且能将结果输出成HTML、json、XML等格式。 &#xff08;2&#xff09;输出形式&#xff1a; -class 仅显示一类硬件信息&#xff0c;可以使用lshw -short或ls…

网络:PPP协议

1. HDLC协议 高级链路控制协议 2. PPP协议 点对点协议&#xff0c;是point-to-point的简称。和以太网协议一样&#xff0c;PPP是数据链路层协议&#xff0c;定义了帧格式&#xff0c;称为PPP帧。 3. PPP协议与以太网协议的区别 以太网协议工作在以太网接口和以太网链路上。 以…