Vue的学习之旅-part6-循环的集中写法与ES6增强语法

Vue的学习之旅-循环的集中写法与ES6增强语法

  • vue中的几种循环写法
  • for循环
    • for in 循环 for(let i in data){}
    • for of 循环 for(let item of data){}
    • reduce() 遍历 reduce( function( preValue, item){} , 0 )
  • ES6增强写法 类似语法糖简写
    • 对象简写
    • 函数简写
  • 动态组件中使用 <keep-alive>缓存组件,防止反复重新渲染组件


前几篇博客: Vue的学习之旅-part1
前几篇博客: Vue的学习之旅-part2
前几篇博客: Vue的学习之旅-part3
前几篇博客: Vue的学习之旅-part4
前几篇博客: Vue的学习之旅-part5

vue中的几种循环写法

for循环

在Vue中,v-for指令用于实现循环渲染列表数据

v-for是Vue.js提供的一个非常实用的指令,它主要用于在前端页面中根据数组或对象的数据动态生成DOM元素。以下是使用v-for时的一些关键点:

  1. 遍历数组:当需要遍历一个数组并创建一系列元素时,可以使用v-for指令,它会基于数组的索引来绑定每个元素的相关数据。
  2. 遍历对象:如果需要遍历对象的键值对,也可以使用v-for,在这种情况下,通常使用(key, value)的语法格式来访问对象的键和值。
  3. 使用别名:在v-for内部,你可以为索引或迭代的对象指定别名,以便在模板中更方便地引用它们。
  4. 动态数据绑定v-for允许你将数据动态地绑定到每个循环生成的元素上,这意味着当数据变化时,相应的元素也会自动更新。
  5. 性能优化:对于大量数据的循环渲染,Vue提供了一些内置的优化机制,如延迟渲染和异步更新,以提高应用的性能。
  6. 作用域:每个由v-for创建的元素都有其独立的作用域,可以在其中使用独立的数据、方法等。
  7. 与组件结合v-for不仅适用于普通元素,还可以用于组件的循环渲染,只需注意在组件中使用v-for时,要确保正确地传递和管理数据。
  8. 注意事项:在使用v-for时,应注意不要直接修改原始数组或对象,因为Vue可能无法检测到这些更改,导致数据不一致的问题。应使用Vue提供的修饰符如$set或利用数组/对象的方法来更改数据。

在这里插入图片描述

for in 循环 for(let i in data){}

在Vue中,“for in”循环通常指的是使用v-for指令来遍历对象的属性

Vue.js中的v-for指令不仅可以用来遍历数组,也可以用来遍历对象的属性。当用于对象时,它遵循(key, value) in object的语法格式,其中key是属性名,value是属性值,object是要遍历的对象。这种方式类似于JavaScript中的for...in循环,但它是在Vue的模板语法中使用的。以下是一些关键点:

  1. 对象遍历:使用v-for="(key, value) in object"可以遍历对象的键值对,允许你访问每个属性的名称和值。
  2. 数组遍历:对于数组,通常使用v-for="item in items"的形式,其中items是数组,item是当前迭代的元素。
  3. 特殊语法v-for指令需要特定的语法形式,即site in sites,其中sites是源数据数组,site是数组元素的迭代别名。
  4. 性能优化:在大型列表渲染时,Vue会尽量高效地更新DOM,但在某些情况下可能需要使用key属性来帮助Vue识别节点,这通常是通过v-bind:key来实现的。
  5. 注意事项:在使用v-for进行循环时,应注意不要直接修改原始数组或对象,因为这可能导致Vue无法检测到变化,从而影响数据的一致性。

综上所述,虽然Vue中的v-for指令与JavaScript中的for...in循环在功能上相似,但它们是在不同的上下文中使用的。在Vue中,v-for是一个模板指令,用于动态生成DOM元素,而for...in是JavaScript中的一个语句,用于遍历对象的属性。
在这里插入图片描述

for of 循环 for(let item of data){}

在Vue中,v-for指令是用于在模板中进行循环的。具体到for of的概念,在Vue中并没有直接称为v-for-of的指令,但v-for指令可以实现类似for of循环的功能,特别是在遍历数组时。

以下是Vue中v-for指令的一些用法:

  1. 遍历数组:使用v-for="(value, index) in array"可以遍历数组,其中value得到数组的值,index得到数组的索引值。这与for of循环在JavaScript中的行为相似。
  2. 遍历对象:虽然技术上可以使用v-for来遍历对象的属性,但它与for...in循环在JavaScript中的行为更相似,即value会得到对象的键值,index会得到对象的键名。不过,通常不建议使用v-for来遍历对象,因为这样会遍历所有可枚举的属性,包括那些可能不期望显示的属性(如原型链上的属性)。
  3. 性能优化:当使用v-for指令进行大量数据的循环渲染时,为了提高性能,推荐使用key属性来帮助Vue跟踪每个节点的身份,这可以通过v-bind:key="uniqueValue"来实现。
  4. 不能遍历对象:与JavaScript中的for of循环一样,v-for不能直接用来遍历对象,如果需要遍历对象的自有属性,可以先使用Object.keys(obj)获取对象的所有键名,然后使用v-for遍历这些键名。
  5. 不支持breakreturn:与JavaScript中的for of循环不同,Vue中的v-for不支持breakreturn语句来提前终止循环,这是因为v-for是用于创建DOM元素,而不是用于执行程序逻辑。

Vue中的v-for指令在功能上类似于JavaScript中的for...of循环,尤其是在遍历数组时。但是,由于Vue的模板语法限制,它的使用方式和行为与JavaScript中的for...of循环有所不同。
在这里插入图片描述

循环对象属性的时候,使用for…in,
在遍历数组的时候的时候使用for…of

reduce() 遍历 reduce( function( preValue, item){} , 0 )

reduce方法的第一个参数就是个function
在这里插入图片描述
Vue中没有直接的reduce()方法,但可以在计算属性或方法中使用JavaScript数组的reduce()方法来遍历和处理数据

reduce()方法是JavaScript数组的一个高阶函数,它接受一个回调函数作为参数,并对数组中的每个元素执行该回调函数,最终将数组“归并”为一个单一的值。在Vue中,你可以利用reduce()来执行各种操作,如计算总和、筛选特定条件的元素等。以下是使用reduce()的一些场景:

  • 计算总价格:如果你有一个购物车组件,其中的商品可以通过复选框选中,你可以使用reduce()来计算所有选中商品的总价格。这通常在计算属性中完成,以确保每当选中状态变化时,总价格会自动更新。
  • 数组求和:如果你需要对一个数字数组进行求和,可以使用reduce()来实现。这比使用传统的for循环或forEach方法更为简洁和高效。
  • 累加器(accumulator)reduce()的回调函数接收累加器作为第一个参数,这个累加器是在每次迭代时传递的,它可以是任何值,通常是累积的结果。这使得reduce()非常适合那些需要根据前一步结果来计算下一步结果的场景。
  • 初始值reduce()方法还可以接受一个可选的初始值作为第二个参数。如果提供了初始值,它将作为第一次调用回调函数时的累加器值。这允许你控制累加器的起始点。

虽然Vue本身不提供reduce()方法,但你可以在Vue的计算属性或方法中使用JavaScript的reduce()来处理数组。这是一种非常强大的工具,可以帮助你以声明性的方式处理复杂的数据集合。

ES6增强写法 类似语法糖简写

对象简写

在这里插入图片描述
ES6中的对象简写特性允许更简洁地定义对象的属性和方法。具体如下:

  1. 属性的简写:当对象的键名与变量名相同时,可以直接使用变量名作为键值对的键,省略键名和冒号。例如let name = 'ww'; let age = 18; let es6 = {name, age};
  2. 函数的简写:在对象中定义函数时,可以省略function关键字,直接写函数体,并且如果函数名与变量名相同,也可以省略函数名。例如let obj = {es6() {}}等价于let obj = {es6: function() {}}
  3. 计算属性名:可以在对象字面量中使用表达式作为属性名,该表达式需用方括号包围。例如let name = 'ww'; let age = 18; let obj = {age, ['@' + name]: name};表示创建一个对象,其中age是直接属性名,而'@'+name是通过表达式计算得到的属性名。
  4. 默认参数:在对象的方法中,可以使用默认参数,使得在调用方法时不必传递所有参数。
  5. 箭头函数:结合箭头函数使用对象简写可以使代码更加简洁。

这些简写特性不仅让代码变得更加简洁易读,也提高了编写效率。需要注意的是,简写的函数不能作为构造函数使用,否则会报错。


函数简写

ES6中引入的箭头函数是函数简写的典型代表,它提供了更简洁的语法形式和更方便的作用域绑定

箭头函数的使用场景非常广泛,尤其是在回调函数和数组方法中,它们的简洁性大大提升了代码的可读性和编写效率。以下是箭头函数的一些关键特点:

  • 简洁的语法:箭头函数省略了function关键字,直接使用=>来分隔参数列表和函数体。
  • 作用域的改进:箭头函数不创建自己的this,它们从封闭的作用域中继承this值。这使得在处理事件监听器、定时器等需要捕获this的场景下变得非常方便。
  • 默认参数:ES6允许在函数参数列表中为参数设置默认值,这可以简化条件判断语句,使得函数定义更加简洁明了。
  • 对象方法简写:在对象字面量中定义方法时,可以使用箭头函数进行简写,这样可以避免重复书写function关键字和冒号。

ES6的这些函数简写特性不仅让代码变得更加简洁易读,也提高了编写效率。需要注意的是,简写的函数不能作为构造函数使用,否则会报错。
在这里插入图片描述
在这里插入图片描述

动态组件中使用 缓存组件,防止反复重新渲染组件

在这里插入图片描述
切换tab栏目,再次切换回来,组件就重新渲染了在这里插入图片描述
如何解决这个问题?
需要使用到:
在这里插入图片描述
此时,切换到其他tab,再切换回来,不会重新渲染组件,之前选择的内容也还会在。


博主 DTcode7 带您 溺亖在知识的海洋里,嘿嘿嘿.~
🐒 个人主页—— DTcode7 的博客 🐒
《微信小程序相关博客》
《Vue相关博客》
《前端开发习惯与小技巧相关博客》
《AIGC相关博客》
《photoshop相关博客》
😚 吾辈才疏学浅,摹写之作,恐有瑕疵。望诸君海涵赐教。望轻喷,嘤嘤嘤 🙈
🕍 愿斯文对汝有所裨益,纵其简陋未及渊博,亦足以略尽绵薄之力。倘若尚存阙漏,敬请不吝斧正,俾便精进!


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

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

相关文章

【面试笔记】项目经理常见面试题

1、项目经理的能力和职能&#xff1f; 作为一个项目经理&#xff0c;我的主要能力和职能包括以下几个方面&#xff1a; 项目规划与管理&#xff1a;根据项目需求制定详尽的项目计划&#xff0c;包括时间表、资源分配、预算控制以及风险管理计划。确保项目在预定时间内按照既定…

实现卡片中每一条数据key的右对齐

前言&#xff1a; 在公司里面导师要求实现了卡片&#xff08;公司使用的框架是react&#xff0c;卡片引用的ant-design-moble的组件&#xff09;的功能&#xff0c;每一条数据横向展示&#xff0c;但是数据的key要实现右对齐&#xff0c;经过不断的修改&#xff0c;最后总结结…

AI应用实战2:使用scikit-learn进行回归任务实战

代码仓库在gitlab&#xff0c;本博客对应于02文件夹。 1.问题分析 在此篇博客中我们来对回归任务进行实战演练&#xff0c;背景是直播带货平台的业绩预测。第一步&#xff0c;就是分析问题。 问题痛点&#xff1a; 在直播带货平台上&#xff0c;由于市场环境多变、用户行为复…

5 个让日常编码更简单的 Python 库

今天我们一起来研究一些非常有用的第三方模块&#xff0c;可以使得我们的日常编码变得更加简单方便 sh https://github.com/amoffat/sh 如果曾经在 Python 中使用过 subprocess 库&#xff0c;那么我们很有可能对它感到失望&#xff0c;它不是最直观的库&#xff0c;可能还有些…

ubuntu 更改 ssh 默认端口 22 以加固安全

出于加固安全考虑&#xff0c;一般公司会禁用 ssh 的 22 端口号&#xff0c;因此我们需要改为其他端口。 1、ssh 命令行登录 进入台式机&#xff0c;修改 /etc/ssh/sshd_config 文件中的 Port 配置行&#xff0c;将 22 改为 8022&#xff0c;保存修改后&#xff0c;重启 ssh 服…

Vue3点击事件实现使table中最后一列可编辑的同时,表格中的滚动条自动滚动到该列位置

这个小功能我大概花了小半天的时间才实现&#xff0c;所以无比痛恨给我提这个需求的人&#xff0c;还好最后没有放弃&#xff0c;谨以此博客作为记录我被迫走上前端之路的第n天&#xff01;&#xff01;&#xff01; 代码来自项目里面的一部分&#xff0c;所以可能有点乱#&…

作文笔记6 写作顺序

时间顺序 举例&#xff1a;清晨 中午 傍晚&#xff0c;一般用来写景物 空间顺序/游览顺序 上下左右&#xff0c;前后内外 事情发展顺序 故事一般按照该顺序&#xff0c;起因&#xff0c;经过&#xff0c;结果 逻辑顺序 事理说明文&#xff0c;比如说一个事物&#xff0c…

【汇编】存储器

存储器 计算机存储器可分为内部存储器&#xff08;又称内存或主存&#xff09;和外部存储器&#xff0c;其中内存是CPU能直接寻址的储存空间&#xff0c;由半导体器件制成 存储单元的地址和内容 计算机存储信息的基本单位是一个二进制位&#xff0c;一位可存储一个二进制数&…

企业利器大曝光:CRM系统功能剖析

企业存在的根本目标是吸引并留住顾客。为了能够追踪顾客的信息以及与他们保持联系&#xff0c;不论企业规模大小&#xff0c;都长期使用了多种传统的手工方式。——彼得德鲁克 CRM系统的功能有哪些&#xff1f;如何做客户管理一直是企业管理中的热门话题&#xff0c;CRM&#…

[大模型]Qwen1.5-7B-Chat-GPTQ-Int4 部署环境

Qwen1.5-7B-Chat-GPTQ-Int4 部署环境 说明 Qwen1.5-72b 版本有BF16、INT8、INT4三个版本&#xff0c;三个版本性能接近。由于BF16版本需要144GB的显存&#xff0c;让普通用户忘却止步&#xff0c;而INT4版本只需要48GB即可推理&#xff0c;给普通用户本地化部署创造了机会。&…

C语言——数据在内存中的存储

引言 数据是程序运行的核心。当我们用C语言编写程序时&#xff0c;我们实际上是在操纵内存中的数据。这些数据在内存中是如何储存的&#xff0c;今天我们就来学习这些内容。 基本数据类型 1.整型 int: 基本整型&#xff0c;通常占用4个字节 short: 短整型&#xff0c;通常占用…

图像处理特征提取

图像处理中的特征提取是指从图像数据中提取出具有区分性和代表性的特征&#xff0c;以用于图像分类、目标检测、图像匹配等任务。下面介绍几种常见的图像处理特征提取方法&#xff1a; 颜色特征&#xff1a;颜色是图像中最直观且重要的特征之一。常见的颜色特征提取方法包括颜色…

zustand状态库在react类组件中使用

如果想在React类组件中使用zustand状态管理库&#xff0c;可以在类组件中调用create函数创建一个状态store&#xff0c;并使用useStore钩子来访问和更新状态。虽然zustand通常与函数式组件一起使用&#xff0c;但也可以在类组件中使用。 以下是一个简单的示例&#xff0c;展示…

MS软件Perl脚本提能培训方案

热忱欢迎贵公司选派研发人员参加铜陵浩辰科技有限公司举办的《MS软件Perl脚本提能培训方案》&#xff0c;此次培训将特邀具有多年授课经验的老师主讲。 一、培训概述 本培训旨在提高学员Perl脚本编写能力&#xff0c;能实现自行编写脚本&#xff0c;提高Perl脚本进行高级分析…

Gradle 在 Spring 中的使用-ApiHug准备-工具篇-006

&#x1f917; ApiHug {Postman|Swagger|Api...} 快↑ 准√ 省↓ GitHub - apihug/apihug.com: All abou the Apihug apihug.com: 有爱&#xff0c;有温度&#xff0c;有质量&#xff0c;有信任ApiHug - API design Copilot - IntelliJ IDEs Plugin | Marketplace ApiHug …

【计算机组成原理】CISC和RISC

目录 前言1. CISC&#xff08;复杂指令集计算&#xff09;2. RISC&#xff08;精简指令集计算&#xff09;3. 差异 前言 对于这方面的知识常见于408或者软考 CISC&#xff08;Complex Instruction Set Computing&#xff09;和RISC&#xff08;Reduced Instruction Set Compu…

【arduino】控制N位数码管

以下以四位共阳极数码管为例&#xff1b; 本文所有说明均以注释的方式进行。 使用方法&#xff1a; #include "DigitalTube.h" //每位共阳极对应的引脚int digital[4] {8, 11, 12, 7};//参数分别为a f b g e c d dp digital(共阳极引脚数组) length(digital长度)D…

LRUCache原理及源码实现

目录 LRUCache简介&#xff1a; LRUCache的实现&#xff1a; LinkedHashMap方法实现&#xff1a; 自己实现链表&#xff1a; 前言&#xff1a; 有需要本文章源码的友友请前往&#xff1a;LRUCache源码 LRUCache简介&#xff1a; LRU是Least Recently Used的缩写&#xf…

ChatGPT-4 Turbo 今天开放啦!附如何查询GPT-4 是否为 Turbo

2024年4月12日&#xff0c;OpenAI在X上宣布GPT-4 Turbo开放了&#xff01;提高了写作、数学、逻辑推理和编码方面的能力。另外最重要的是&#xff0c;响应速度更快了&#xff01;&#xff01; ChatGPT4 Turbo 如何升级&#xff1f;解决国内无法升级GPT4 Turbo的问题&#xff0…

设计模式-代理模式(Proxy)

1. 概念 代理模式&#xff08;Proxy Pattern&#xff09;是程序设计中的一种结构型设计模式。它为一个对象提供一个代理对象&#xff0c;并由代理对象控制对该对象的访问。 2. 原理结构图 抽象角色&#xff08;Subject&#xff09;&#xff1a;这是一个接口或抽象类&#xff0…