详解在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代码(浏览器F12及VS中debugger关键字)
Jan 25 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 Javascript
JavaScript中的alert()函数使用技巧详解
Dec 29 Javascript
JavaScript中的对象的extensible属性介绍
Dec 30 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
深入剖析JavaScript:Object类型
May 10 Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 Javascript
微信小程序 图片上传实例详解
May 05 Javascript
JavaScript基于数组实现的栈与队列操作示例
Dec 22 Javascript
vue.js实现的幻灯片功能示例
Jan 18 Javascript
基于JS开发微信网页录音功能的实例代码
Apr 30 Javascript
Vue2项目中对百度地图的封装使用详解
Jun 16 Vue.js
编写一个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
php中的三元运算符使用说明
2011/07/03 PHP
PHP 验证码的实现代码
2011/07/17 PHP
php堆排序实现原理与应用方法
2015/01/03 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
php正则表达式获取内容所有链接
2015/07/24 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
慎用 somefunction.prototype 分析
2009/06/02 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
javascript日期转换 时间戳转日期格式
2011/11/05 Javascript
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
2013/12/17 Javascript
javascript中打印当前的时间实现思路及代码
2013/12/18 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
2015/02/28 Javascript
js获取指定字符前/后的字符串简单实例
2016/10/27 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
微信小程序商城项目之淘宝分类入口(2)
2017/04/17 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
2017/05/23 Javascript
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
ES11新增的这9个新特性,你都掌握了吗
2020/10/15 Javascript
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
一文总结学习Python的14张思维导图
2017/10/17 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
Python3中_(下划线)和__(双下划线)的用途和区别
2019/04/26 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
在Python中使用MongoEngine操作数据库教程实例
2019/12/03 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
微软开源最强Python自动化神器Playwright(不用写一行代码)
2021/01/05 Python
HTML5 canvas基本绘图之绘制线条
2016/06/27 HTML / CSS
汇科协同Java笔试题
2012/03/31 面试题
心得体会怎么写
2013/12/30 职场文书
电子信息专业自荐书
2014/02/04 职场文书
学生安全教育材料
2014/02/14 职场文书
法人委托书范本
2014/04/04 职场文书
会议简讯范文
2015/07/20 职场文书
选购到合适的激光打印机
2022/04/21 数码科技