vue v-for in 对象 顺序排列

6 篇文章 0 订阅

今天在一个项目中用到了for in 语句,遇到了一个坑

例如这是一个vue文件


<script>
//我有一个对象
export default {
	data() {
		return {
			list: {
				"2": "小明",
				"0": "小L",
				"1": "小J",
			}
		}
	}
}
</script>
<template>
	<ul>
		<li v-for="(value,key,index) in list">{{value}}</li>
	</ul>
</template>

预期展示

	小明
	小L
	小J

实际展示

	小L
	小J
	小明

试了下原生的for in打印的顺序和上面试一样的。。。
所以我认为for in 遍历对象的实现应该是和 Object.keys有关的。

var list= {
				"2": "小明",
				"0": "小L",
				"1": "小J",
			}
Object.keys(list) // ["0", "1", "2"]

for in 先使用 Object.keys(list)获取对象的key数组。然后再暴露出来。。
vue 的源码是这样实现的
在这里插入图片描述

所以要是想保证你原本的顺序还是用 数组遍历吧,别遍历对象了

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值