详解在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 相关文章推荐
jQuery ajax serialize()方法的使用以及常见问题解决
Jan 27 Javascript
JavaScript 垃圾回收机制分析
Oct 10 Javascript
jQuery判断元素上是否绑定了指定事件的方法
Mar 17 Javascript
JavaScript学习小结(7)之JS RegExp
Nov 29 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
ReactNative踩坑之配置调试端口的解决方法
Jul 28 Javascript
用vue-cli开发vue时的代理设置方法
Sep 20 Javascript
微信小程序mpvue点击按钮获取button值的方法
May 29 Javascript
细说webpack6 Babel的使用详解
Sep 26 Javascript
d3.js实现图形缩放平移
Dec 19 Javascript
vue实现打地鼠小游戏
Aug 21 Javascript
Vue+Java+Base64实现条码解析的示例
Sep 23 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
php+mysql删除指定编号员工信息的方法
2015/01/14 PHP
PHP 获取客户端 IP 地址的方法实例代码
2018/11/11 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
PHP 自动加载类原理与用法实例分析
2020/04/14 PHP
js 替换
2008/02/19 Javascript
javascript 函数速查表
2010/02/07 Javascript
jquery获取input的value问题说明
2010/08/19 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
2013/04/17 Javascript
jquery中使用循环下拉菜单示例代码
2014/09/24 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
2016/07/14 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
Angular 4依赖注入学习教程之组件服务注入(二)
2017/06/04 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
深入剖析Node.js cluster模块
2018/05/23 Javascript
Vue中UI组件库之Vuex与虚拟服务器初识
2019/05/07 Javascript
python模拟登录百度贴吧(百度贴吧登录)实例
2013/12/18 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
Python3实现对列表按元组指定列进行排序的方法分析
2018/12/22 Python
python爬虫 urllib模块反爬虫机制UA详解
2019/08/20 Python
Windows下python3安装tkinter的问题及解决方法
2020/01/06 Python
Python PyInstaller安装和使用教程详解
2020/01/08 Python
Python各种扩展名区别点整理
2020/02/27 Python
不到20行实现Python代码即可制作精美证件照
2020/04/24 Python
印度领先的在线时尚商店:Koovs
2016/08/28 全球购物
新西兰便宜隐形眼镜购买网站:QUICKLENS New Zealand
2019/03/02 全球购物
某公司Java工程师面试题笔试题
2016/03/27 面试题
幼儿园数学教学反思
2014/02/02 职场文书
集体婚礼策划方案
2014/02/22 职场文书
个人主要事迹材料
2014/08/26 职场文书
劳资员岗位职责
2015/02/13 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
2022/04/24 Vue.js