记：Vue项目中data中数字类型属性值被修改

描述

本人在项目中模拟了一组数据（对象数组），其中，数组每一项的id值都是17位长度的数组，格式如下：

data() {
	return {
		images: [
            {
                name: "02.jpg",
                id: 12345678987654323,
                url:
                  "https://docs.moodle.org/all/es/images_es/e/ed/df-js-tab.png",
              },
              {
                name: "03.jpg",
                id: 12345678987654324,
                url:
                  "https://docs.moodle.org/all/es/images_es/e/ed/df-js-tab.png",
              },
              {
                name: "04.jpg",
                id: 12345678987654325,
                url:
                  "https://docs.moodle.org/all/es/images_es/e/ed/df-js-tab.png",
              },
              {
                name: "05.jpg",
                id: 12345678987654326,
                url:
                  "https://docs.moodle.org/all/es/images_es/e/ed/df-js-tab.png",
              },
              {
                name: "06.jpg",
                id: 12345678987654327,
                url:
                  "https://docs.moodle.org/all/es/images_es/e/ed/df-js-tab.png",
              },
              {
                name: "07.jpg",
                id: 12345678987654328,
                url:
                  "https://docs.moodle.org/all/es/images_es/e/ed/df-js-tab.png",
              }
	}
}

之后，通过v-for将数组渲染成HTML结构，点击每个图片，获得当前图片对应的对象。

<div
  class="single_image"
  v-for="item in images"
  :key="item.id"
  @click="checkboxChange(item)">
  <img :src="item.url" alt="" />
  <div class="image_title">
     {{ item.name }}
  </div>
</div>

打印item.id、item.name，发现多个图片的item.id是重复的。

思考

遇到这个情况的第一反应是“v-for遍历过程除了问题，修改了我的数据”。请教过朋友，她在created钩子函数中打印了数据（页面渲染之前，v-for还没对数据进行遍历渲染），结果发现此时的数据已经被修改：

被修改的只有id，没有name和url，难道与数据格式有关？将原先的数据类型的id转成字符串类型，发现此时的id就不会被修改了：


接下来的问题就是：为什么只有数字类型时才会出现错乱的情况？我们将id再转成字符串，并减少了长度，发现id的值也是正常的：

猜测

或许，Vue对数字类型的数据有长度限制，超过限制长度后会对数据做一些处理？

为了验证这个结论，在data中定义了一个aNumber属性，数字类型，长度18：

data() {
	aNumber: 123456789098765432
},
created() {
	console.log(this.aNumber);		//结果：123456789098765440
}

将数字长度改成15：

data() {
	aNumber: 123456789098765
},
created() {
	console.log(this.aNumber);		//结果：123456789098765
}

在data中定义一个数字数组，每项长度17，打印：

data() {
	numArr: [12345678909876543, 12345678909876544, 12345678909876545],
},
created() {
	console.log(this.numArr);
}
/* 打印结果
0: 12345678909876544
1: 12345678909876544
2: 12345678909876544
*/

以上都是自己的推测，没有找到官方资料；如果有大佬清楚原因，欢迎指教