详解在Vue.js编写更好的v-for循环的6种技巧


Posted in Javascript onApril 14, 2020

在VueJS中,v-for循环是每个项目都会使用的东西,它允许您在模板代码中编写for循环。

在最基本的用法中,它们的用法如下。

<ul>
 <li v-for='product in products'>
  {{ product.name }}
 </li>
</ul>

但是,在本文中,我将介绍六种方法来使你的 v-for 代码更加精确,可预测和强大。

让我们开始吧。

1.始终在v-for循环中使用key

首先,我们将讨论大多数Vue开发人员已经知道的常见最佳做法——在 v-for 循环中使用 :key。通过设置一个惟一的键属性,它可以确保组件以您期望的方式工作。

果我们不使用key,Vue将尝试使DOM尽可能高效,这可能意味着 v-for 元素可能会出现乱序或其他不可预测的行为。如果我们对每个元素都有唯一的键引用,那么我们就可以更好地准确地预测DOM将如何操作。

<ul>
 <li 
  v-for='product in products'
  :key='product._id' 
 >
  {{ product.name }}
 </li>
</ul>

2.在一个范围内循环

尽管大多数情况下,v-for 用于遍历数组或对象,但在某些情况下,我们肯定只希望循环执行一定次数。
例如,假设我们正在为在线商店创建一个分页系统,而我们只希望每页显示10个产品。使用一个变量来跟踪当前的页码,我们可以像这样处理分页。

<ul>
 <li v-for='index in 10' :key='index'>
  {{ products[page * 10 + index] }}
 </li>
</ul>

3.不要在循环中使用v-if

一个超级常见的错误是使用 v-if 来过滤 v-for 循环的数据。尽管这看起来很直观,但它会导致一个巨大的性能问题——VueJS优先考虑 v-for 而不是 v-if 指令。

这意味着您的组件将循环遍历每个元素,然后检查 v-if 条件以确定是否应渲染。因此,实际上,无论条件是什么,您都将遍历数组的每个项目。

不要这样:

// BAD CODE!
<ul>
 <li 
  v-for='product in products' 
  :key='product._id' 
  v-if='product.price < 50'
 >
  {{ product.name }}
 </li>
</ul>

4.使用计算属性或方法代替

为避免上述问题,我们应该在遍历模板中的数据之前对其进行过滤。有两种非常相似的方法:

  • 使用计算属性
  • 使用过滤方法

让我们快速地介绍一下这两种方法。

首先,我们只需要设置一个计算属性,为了获得与之前的v-if相同的功能,代码应如下所示。

<ul>
 <li v-for='products in productsUnderFifty' :key='product._id' >
  {{ product.name }}
 </li>
</ul>

// ...
<script>
 export default {
  data () {
   return {
    products: []
   }
  },
  computed: {
   productsUnderFifty: function () {
    return this.products.filter(product => product.price < 50)
   }
  }
 }
</script>

下面的代码几乎相同,但是使用方法改变了我们访问模板中的值的方式,如果我们希望能够将变量传递给筛选器,那么方法是最好的选择。

<ul>
 <li v-for='products in productsUnderPrice(50)' :key='product._id' >
  {{ product.name }}
 </li>
</ul>

// ...

<script>
 export default {
  data () {
   return {
    products: []
   }
  },
  methods: {
   productsUnderPrice (price) {
    return this.products.filter(product => product.price < price)
   }
  }
 }
</script>

5.在循环中访问项目的索引

除了遍历数组和访问每个元素之外,我们还可以跟踪每个项的索引。

为此,我们必须在项目后添加一个索引值,它非常简单,可用于分页,显示列表索引,显示排名等。

<ul>
 <li v-for='(products, index) in products' :key='product._id' >
  Product #{{ index }}: {{ product.name }}
 </li>
</ul>

6.遍历一个对象

到目前为止,我们只真正看过使用 v-for 遍历数组,但是我们可以轻松地遍历对象的键值对。

与访问元素的索引类似,我们必须向循环中添加另一个值。如果我们用一个参数遍历一个对象,我们将遍历所有的项。
如果我们添加另一个参数,我们将获得items 和 key,如果添加第三个,我们还可以访问 v-for 循环的索引。

假设我们要遍历产品中的每个媒体资源。

<ul>
 <li v-for='(products, index) in products' :key='product._id' >
  <span v-for='(item, key, index) in product' :key='key'>
   {{ item }}
  </span>
 </li>
</ul>

总结

希望这篇简短的文章能教您一些有关使用Vue的 v-for 指令的最佳做法。
你还有什么其他建议吗?

原文:https://learnvue.co/2020/02/6-techniques-to-write-better-vuejs-v-for-loops/?utm_source=rss&utm_medium=rss&utm_campaign=6-techniques-to-write-better-vuejs-v-for-loops
翻译:杜尼卜

到此这篇关于详解在Vue.js编写更好的v-for循环的6种技巧的文章就介绍到这了,更多相关Vue.js v-for循环内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript随机排序(随即出牌)
Sep 17 Javascript
JavaScript获取当前网页标题(title)的方法
Apr 03 Javascript
JS实现自定义简单网页软键盘效果代码
Nov 05 Javascript
Javascript字符串常用方法详解
Jul 21 Javascript
JavaScript简单获取系统当前时间完整示例
Aug 02 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 Javascript
Bootstrap标签页(Tab)插件使用方法
Mar 21 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
Jan 06 Javascript
浅谈JS中this在各个场景下的指向
Aug 14 Javascript
JS实现盒子拖拽效果
Feb 06 Javascript
JS对象属性的检测与获取操作实例分析
Mar 17 Javascript
vue实现点击出现操作弹出框的示例
Nov 05 Javascript
编写一个javascript元循环求值器的方法
Apr 14 #Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 #Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 #Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
Apr 14 #Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
Apr 13 #Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 #Javascript
vue cli3适配所有端方案的实现
Apr 13 #Javascript
You might like
在DC的漫画和电影中,蝙蝠侠的宿敌,小丑的真名是什么?
2020/04/09 欧美动漫
php学习 函数 课件
2008/06/15 PHP
PHP 地址栏信息的获取代码
2009/01/07 PHP
php 分库分表hash算法
2009/11/12 PHP
PHP简洁函数小结
2011/08/12 PHP
腾讯微博提示missing parameter errorcode 102 错误的解决方法
2014/12/22 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
PHP简单实现欧拉函数Euler功能示例
2017/11/06 PHP
PHP生成腾讯云COS接口需要的请求签名
2018/05/20 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
转换json格式的日期为Javascript对象的函数
2010/07/13 Javascript
基于JQuery 滑动与动画的说明介绍
2013/04/18 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
javascript针对cookie的基本操作实例详解
2015/11/30 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
javascript简易画板开发
2020/04/12 Javascript
JavaScript实现打印星型金字塔功能实例分析
2017/09/27 Javascript
python实现在sqlite动态创建表的方法
2015/05/08 Python
python实现爬虫统计学校BBS男女比例之多线程爬虫(二)
2015/12/31 Python
tensorflow入门之训练简单的神经网络方法
2018/02/26 Python
Python3 jupyter notebook 服务器搭建过程
2018/11/30 Python
解决项目pycharm能运行,在终端却无法运行的问题
2019/01/19 Python
python Pillow图像处理方法汇总
2019/10/16 Python
Python实现图像去噪方式(中值去噪和均值去噪)
2019/12/18 Python
Python编程快速上手——strip()函数的正则表达式实现方法分析
2020/02/29 Python
django 实现手动存储文件到model的FileField
2020/03/30 Python
python如何提升爬虫效率
2020/09/27 Python
css3动画效果小结(推荐)
2016/07/25 HTML / CSS
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
Notino匈牙利:购买香水和化妆品
2019/04/12 全球购物
大学生专业个人学习的自我评价
2013/10/26 职场文书
测绘工程个人的自我评价
2013/11/10 职场文书
社会学专业求职信
2014/02/24 职场文书
销售岗位职责范本
2014/06/12 职场文书