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时的一些关键点：
- 遍历数组：当需要遍历一个数组并创建一系列元素时，可以使用
v-for指令，它会基于数组的索引来绑定每个元素的相关数据。 - 遍历对象：如果需要遍历对象的键值对，也可以使用
v-for，在这种情况下，通常使用(key, value)的语法格式来访问对象的键和值。 - 使用别名：在
v-for内部，你可以为索引或迭代的对象指定别名，以便在模板中更方便地引用它们。 - 动态数据绑定：
v-for允许你将数据动态地绑定到每个循环生成的元素上，这意味着当数据变化时，相应的元素也会自动更新。 - 性能优化：对于大量数据的循环渲染，Vue提供了一些内置的优化机制，如延迟渲染和异步更新，以提高应用的性能。
- 作用域：每个由
v-for创建的元素都有其独立的作用域，可以在其中使用独立的数据、方法等。 - 与组件结合：
v-for不仅适用于普通元素，还可以用于组件的循环渲染，只需注意在组件中使用v-for时，要确保正确地传递和管理数据。 - 注意事项：在使用
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的模板语法中使用的。以下是一些关键点：
- 对象遍历：使用
v-for="(key, value) in object"可以遍历对象的键值对，允许你访问每个属性的名称和值。 - 数组遍历：对于数组，通常使用
v-for="item in items"的形式，其中items是数组，item是当前迭代的元素。 - 特殊语法：
v-for指令需要特定的语法形式，即site in sites，其中sites是源数据数组，site是数组元素的迭代别名。 - 性能优化：在大型列表渲染时，Vue会尽量高效地更新DOM，但在某些情况下可能需要使用
key属性来帮助Vue识别节点，这通常是通过v-bind:key来实现的。 - 注意事项：在使用
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指令的一些用法：
- 遍历数组：使用
v-for="(value, index) in array"可以遍历数组，其中value得到数组的值，index得到数组的索引值。这与for of循环在JavaScript中的行为相似。 - 遍历对象：虽然技术上可以使用
v-for来遍历对象的属性，但它与for...in循环在JavaScript中的行为更相似，即value会得到对象的键值，index会得到对象的键名。不过，通常不建议使用v-for来遍历对象，因为这样会遍历所有可枚举的属性，包括那些可能不期望显示的属性（如原型链上的属性）。 - 性能优化：当使用
v-for指令进行大量数据的循环渲染时，为了提高性能，推荐使用key属性来帮助Vue跟踪每个节点的身份，这可以通过v-bind:key="uniqueValue"来实现。 - 不能遍历对象：与JavaScript中的
for of循环一样，v-for不能直接用来遍历对象，如果需要遍历对象的自有属性，可以先使用Object.keys(obj)获取对象的所有键名，然后使用v-for遍历这些键名。 - 不支持
break和return：与JavaScript中的for of循环不同，Vue中的v-for不支持break和return语句来提前终止循环，这是因为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中的对象简写特性允许更简洁地定义对象的属性和方法。具体如下：
- 属性的简写：当对象的键名与变量名相同时，可以直接使用变量名作为键值对的键，省略键名和冒号。例如
let name = 'ww'; let age = 18; let es6 = {name, age};。 - 函数的简写：在对象中定义函数时，可以省略
function关键字，直接写函数体，并且如果函数名与变量名相同，也可以省略函数名。例如let obj = {es6() {}}等价于let obj = {es6: function() {}}。 - 计算属性名：可以在对象字面量中使用表达式作为属性名，该表达式需用方括号包围。例如
let name = 'ww'; let age = 18; let obj = {age, ['@' + name]: name};表示创建一个对象，其中age是直接属性名，而'@'+name是通过表达式计算得到的属性名。 - 默认参数：在对象的方法中，可以使用默认参数，使得在调用方法时不必传递所有参数。
- 箭头函数：结合箭头函数使用对象简写可以使代码更加简洁。
这些简写特性不仅让代码变得更加简洁易读，也提高了编写效率。需要注意的是，简写的函数不能作为构造函数使用，否则会报错。
函数简写
ES6中引入的箭头函数是函数简写的典型代表，它提供了更简洁的语法形式和更方便的作用域绑定。
箭头函数的使用场景非常广泛，尤其是在回调函数和数组方法中，它们的简洁性大大提升了代码的可读性和编写效率。以下是箭头函数的一些关键特点：
- 简洁的语法：箭头函数省略了
function关键字，直接使用=>来分隔参数列表和函数体。 - 作用域的改进：箭头函数不创建自己的
this，它们从封闭的作用域中继承this值。这使得在处理事件监听器、定时器等需要捕获this的场景下变得非常方便。 - 默认参数：ES6允许在函数参数列表中为参数设置默认值，这可以简化条件判断语句，使得函数定义更加简洁明了。
- 对象方法简写：在对象字面量中定义方法时，可以使用箭头函数进行简写，这样可以避免重复书写
function关键字和冒号。
ES6的这些函数简写特性不仅让代码变得更加简洁易读，也提高了编写效率。需要注意的是，简写的函数不能作为构造函数使用，否则会报错。
动态组件中使用 缓存组件，防止反复重新渲染组件
切换tab栏目，再次切换回来，组件就重新渲染了
如何解决这个问题？
需要使用到：
此时，切换到其他tab，再切换回来，不会重新渲染组件，之前选择的内容也还会在。
博主 DTcode7 带您 溺亖在知识的海洋里，嘿嘿嘿.~
🐒 个人主页—— DTcode7 的博客 🐒
《微信小程序相关博客》
《Vue相关博客》
《前端开发习惯与小技巧相关博客》
《AIGC相关博客》
《photoshop相关博客》
😚 吾辈才疏学浅，摹写之作，恐有瑕疵。望诸君海涵赐教。望轻喷，嘤嘤嘤 🙈
🕍 愿斯文对汝有所裨益，纵其简陋未及渊博，亦足以略尽绵薄之力。倘若尚存阙漏，敬请不吝斧正，俾便精进！
![[大模型]Qwen1.5-7B-Chat-GPTQ-Int4 部署环境](https://img-blog.csdnimg.cn/direct/b8c9ed143e85437fbbad7832cc8b3b8a.png#pic_center)
