【小白成长记】使用watch优化获取不同tab下数据的代码逻辑

场景:页面有一个 el-tab,共两个tab:Tab1 与 Tab2。需求要求进入页面默认active第二个tab即Tab2。

开始代码写成如下:

<el-tabs v-model="tabActiveName" type="card" @before-leave="handleTabsClick"><!-- Tab1 --><el-tab-pane label="Tab1" name="first">...</el-tab-pane><!-- Tab2 --><el-tab-pane name="second" :lazy="true">...</el-tab-pane>
</el-tabs>
import { onMounted } from 'vue'const tabActiveName = ref('second')
onMounted(() => {getSecondTabData()
})// 切换 Tab1 与 Tab2
const handleTabsClick= (newTab) => {if (newTab === 'first') {getFirstTabFunc()} else {getSecondTabData()}
}// 获取 Tab1 下数据的方法
const getFirstTabFunc = () =>{}// 获取 Tab2 下数据的方法
const getSecondTabData = () =>{}

分析:Tab1 与 Tab2 下的数据是在点击tab时通过给el-tab绑定before-leave事件中进行处理获取的, 同时进入页面 onMounted 时获取了第二个tab的数据(因为按产品需求默认展示第二个tab)。这样写代码会有一个问题:如果后续需求改为初始展示Tab1,则需要修改进入页面 onMounted 时需改为获取Tab1的数据。代码兼容性差。

优化为:使用watch监测tab 的 active变化且设置 immediate 为 true ,这样就不再需要进入页面获取某个tab数据的逻辑了。直接在watch中监测到tab active变化,则调用对应tab下的数据接口。这样无论初始展示哪个tab,代码都可以兼容,只需要修改设置tab active值,无需修改其它逻辑。

优化后的代码为:

<!-- el-tab 中 不再需要绑定 @before-leave="handleTabsClick" -->
<el-tabs v-model="tabActiveName" type="card">...
</el-tabs>
const tabActiveName = ref('second')// 获取 Tab1 下数据的方法
const getFirstTabFunc = () =>{}// 获取 Tab2 下数据的方法
const getSecondTabData = () =>{}/* 注意这里 watch 的逻辑需要写在 getFirstTabFunc 与 getSecondTabData 这两个方法后面。
如果写在前面会报错:getSecondTabData is not a function。
因为watch设置了immediate:true,代码执行到这里会立即执行一次watch回调函数里的内容,
调用getSecondTabData时这个方法尚未定义,所以会报错。 */
watch(infoActiveName,(newValue)=>{if (newValue === 'first') {getFirstTabFunc()} else {getSecondTabData()}
},{immediate:true})

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

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

相关文章

数据库学习记录(二)多表设计与多表查询

一对多 一对多时候&#xff0c;一张表内的一个数据可能对应着其他表内的多个数据&#xff0c;例如一个部门内有多个员工&#xff0c;但是公司里不只一个部门&#xff0c;也不止一个员工&#xff0c;这个时候就是一对多的情况&#xff0c;这个时候可以绑定一个外键&#xff0c;…

Linux 磁盘的一生

注意&#xff1a;实验环境都是使用VMware模拟 ​ 磁盘接口类型这里vm中是SCSI&#xff0c;扩展sata,ide(有时间可以看看或者磁盘的历史) ​ 总结&#xff1a;磁盘从有到无—类似于建房子到可以住 ————————————————————————————————————…

php laravel 二维码

public function qr($url,$name2,$inpath){require_once(dirname(__FILE__) . /../../../Library/phpqrcode/phpqrcode.php);$errorCorrectionLevel L;//容错级别$matrixPointSize 10;//生成图片大小$QRcode new \QRcode() ;$QRcode->png($url, $inpath.$name2, $errorCor…

react快速入门教程

react快速入门教程 React是一个用于构建用户界面的JavaScript库。它由Facebook开发,并且已经成为前端开发中最受欢迎的工具之一。本快速入门教程将介绍React的基础知识和常用概念,帮助你开始使用React构建交互式的Web应用程序。 1. React的创建和嵌套组件 React是一个JavaSc…

YOLOv5改进系列:Efficientrep结构助力涨点

一、论文理论 本文提出一种硬件友好的卷积神经网络结构,该结构类似于repvgg。在衡量网络效率时,经常使用Flops或者参数量,这些衡量指标对于硬件计算能力和内存带宽不敏感。因此,如何设计一个神经网络架构,使其有效地利用硬件计算能力和内存带宽是至关重要的。 论文地址:…

@Autowired详解

请直接看原文: Autowired注解详解——超详细易懂-CSDN博客 -------------------------------------------------------------------------------------------------------------------------------- Autowired详解 要搞明白Autowired注解就是要了解它是什么&#xff1f;有…

C++入门(下)

文章目录 1:引用1.1:引用概念1.2:引用的特性.1.2.1:引用在定义时必须初始化1.2.2:一个变量可以有多个引用1.2.3:引用一旦引用一个实体,再不能引用其他实体. 1.3:应用场景1.3.1:做参数1.3.2:做返回值1.3.2.1:传值返回1.3.2.2:传引用返回(错误示范)1.3.2.3:传引用返回(正确示范) …

如何在Ubuntu使用宝塔部署Emlog网站并发布到公网实现任意浏览器访问

文章目录 前言1. 网站搭建1.1 Emolog网页下载和安装1.2 网页测试1.3 cpolar的安装和注册 2. 本地网页发布2.1 Cpolar临时数据隧道2.2.Cpolar稳定隧道&#xff08;云端设置&#xff09;2.3.Cpolar稳定隧道&#xff08;本地设置&#xff09; 3. 公网访问测试总结 前言 博客作为使…

springboot Thymeleaf模版引擎使用

1.引入依赖 <!--thymeleaf视图引擎--> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> html中要声明约束&#xff0c;这样就可以使用themelraf视…

探索 PostgreSQL 的外部数据包装器和统计函数

PostgreSQL 因其稳定性和可扩展性而广受青睐&#xff0c;为开发人员和数据管理员提供了许多有用的函数。在这些函数中&#xff0c;file_fdw_handler、file_fdw_validator、pg_stat_statements、pg_stat_statements_info 以及 pg_stat_statements_reset 是其中的重要函数&#x…

MySOL数据库管理

数据库基本操作 库和表 数据库–>数据表–>行&#xff08;记录&#xff09;&#xff1a;用来描述一个对象的信息列&#xff08;字段&#xff09;&#xff1a;用来描述对象的一个属性常用的数据类型 int整型float单精度浮点 4字节32位double双精度浮点 8字节64位char固…

牛客小白月赛58-C-牛牛

很好的一道模拟题,做起来很舒服 做模拟题重要的还是心态,能静得下心读题 思路: 读完题后,很直观的一个思路就是暴力,但2e5的O(n^2)过不去,怎么优化?? 就是转换 sum ∑a[i] (sum - S0) % m 0 结果 v S0 % m 可以这么转换 sum % m S0 % m 令sum % m k 那么就是…

3d模型变形动画怎么做---模大狮模型网

要制作3D模型的变形动画&#xff0c;你可以通过使用动画软件(如Blender、Maya、3ds Max等)中的变形工具和技术来实现。以下是一般的步骤来制作3D模型的变形动画&#xff1a; 创建基础模型&#xff1a;首先&#xff0c;在3D建模软件中创建或导入你想要进行变形的基础模型。这个基…

LeetCode 刷题 --- 快速幂

前言&#xff1a; 幂运算是一种常见的运算&#xff0c;求取a^n,最容易想到的方法便是通过循环逐个累乘&#xff0c;其复杂度为O(n)&#xff0c;这在很多时候是不够快的&#xff0c;所以我们需要一种算法来优化幂运算的过程。 快速幂&#xff0c;二进制取幂&#xff08;Binary…

JAVA 100道题(12)

12.使用HashSet存储一组不重复的字符串&#xff0c;并编写一个方法检查某个字符串是否已存在于集合中 以下是使用Java中的HashSet来存储一组不重复的字符串&#xff0c;并编写一个方法来检查某个字符串是否已存在于集合中的示例代码&#xff1a; java复制代码 import java.ut…

手写JDK Proxy实现InvocationHandler的Invoker

JDKProxy生成对象的步骤如下&#xff1a; 1、拿到被代理对象的引用&#xff0c;并且获取到它的所有的接口&#xff0c;反射获取。 2、JDKProxy类重新生成一个新的类、同时新的类要实现被代理类所有实现的所有的接 口。 3、动态生成Java代码&#xff0c;把新加的业务逻辑方法由一…

网关层针对各微服务动态修改Ribbon路由策略

目录 一、介绍 二、常规的微服务设置路由算法方式 三、通过不懈努力&#xff0c;找到解决思路 四、验证 五、总结 一、介绍 最近&#xff0c;遇到这么一个需求&#xff1a; 1、需要在网关层&#xff08;目前使用zuul&#xff09;为某一个服务指定自定义算法IP Hash路由策…

JUC并发编程(五)

1、java内存模型 Java内存模型&#xff08;Java Memory Model&#xff0c;JMM&#xff09;是Java编程语言中用于处理并发编程的一组规则和规范。它定义了Java程序中多线程之间如何交互以及内存如何被共享和访问的规则。它定义了主内存&#xff0c;工作内存的抽象概念&#xff0…

一文让你简单了解跨境电商需要购买堡垒机的几大原因

随着互联网技术的快速发展&#xff0c;跨境电商蓬勃发展&#xff0c;但发展过程中网络安全问题日益凸显。因此不少跨境电商企业购买了堡垒机。这是为什么呢&#xff1f;一文让你简单了解跨境电商需要购买堡垒机的几大原因。 一文让你简单了解跨境电商需要购买堡垒机的几大原因 …

代码随想录day26(2)二叉树:二叉搜索树中的众数(leetcode501)

题目要求&#xff1a;给定一个有相同值的二叉搜索树&#xff08;BST&#xff09;&#xff0c;找出 BST 中的所有众数。结点左子树中所含结点的值小于等于当前结点的值&#xff0c;结点右子树中所含结点的值大于等于当前结点的值。 思路&#xff1a;如果不考虑二叉搜索树&#…