详解在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操纵Cookie实现购物车程序
Nov 23 Javascript
JS URL传中文参数引发的乱码问题
Sep 02 Javascript
jquery animate 动画效果使用说明
Nov 04 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
Apr 09 Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
js判断浏览器版本以及浏览器内核的方法
Jan 20 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 Javascript
vue2.0 路由模式mode=&quot;history&quot;的作用
Oct 18 Javascript
jQuery中实现text()的方法
Apr 04 jQuery
基于JS实现数字动态变化显示效果附源码
Jul 18 Javascript
vue 解决IOS10低版本白屏的问题
Nov 17 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
建立动态的WML站点(二)
2006/10/09 PHP
PHP动态生成javascript文件的2个例子
2014/04/11 PHP
php获取远程图片并下载保存到本地的方法分析
2016/10/08 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
javascript 面向对象全新理练之原型继承
2009/12/03 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
2013/01/23 Javascript
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
js实现键盘Enter键提交表单的方法
2015/05/27 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
2015/06/06 Javascript
详解vue-router和vue-cli以及组件之间的传值
2017/07/04 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
2017/07/18 Javascript
详解从新建vue项目到引入组件Element的方法
2017/08/29 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
VSCode 配置React Native开发环境的方法
2017/12/27 Javascript
AngularJS日期格式化常见操作实例分析
2018/05/17 Javascript
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
JavaScript图片旋转效果实现方法详解
2020/06/28 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
python网络编程学习笔记(四):域名系统
2014/06/09 Python
Python常用正则表达式符号浅析
2014/08/13 Python
Python中的面向对象编程详解(上)
2015/04/13 Python
flask 实现token机制的示例代码
2019/11/07 Python
python GUI库图形界面开发之PyQt5拖放控件实例详解
2020/02/25 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
美国牛仔品牌:True Religion
2018/11/16 全球购物
专注澳大利亚特产和新西兰特产的澳洲中文网:0061澳洲制造
2019/03/24 全球购物
幼儿园大班开学教师寄语
2014/04/03 职场文书
《路旁的橡树》教学反思
2014/04/07 职场文书
航空学院求职信
2014/06/11 职场文书
幼儿园安全生产月活动总结
2014/07/05 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
党员评议个人总结
2014/10/20 职场文书
小学班主任工作随笔
2015/08/15 职场文书
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android