Vue2中导入JSON：通配符与命名导入的差异及渲染异常解析

核心原因 #

使用import * as pastExperience导入JSON文件时，你拿到的不是原始数组，而是一个模块包装对象。这个对象里除了包含数组的索引属性（0、1，对应数组的两个元素），还会被webpack这类打包工具自动添加__esModule（标记为ES模块）和default（指向原始JSON数组）两个可枚举属性。

Vue2的v-for遍历对象时，会遍历该对象的所有可枚举属性。所以遍历这个模块对象时，会把0、1、__esModule、default四个属性全部遍历，最终渲染出4个<p>标签——额外的两个就是遍历__esModule和default时生成的。

而import pastExperience的命名导入方式，本质是直接导入了模块的default导出内容，也就是原始的JSON数组。Vue2遍历数组时只会处理数组的索引元素，因此只会渲染2个<p>标签，表现正常。

Vue2底层处理逻辑 #

Vue2对v-for的处理会区分遍历目标的类型：

• 遍历数组：Vue2通过数组长度和索引遍历元素，仅处理数组本身的元素，不会读取对象类型的额外属性。
• 遍历对象：Vue2会调用Object.keys()获取对象的所有可枚举键，逐个遍历这些键对应的属性值。模块包装对象的__esModule和default都是可枚举属性，因此会被纳入遍历范围，生成额外DOM元素。

直观验证 #

在通配符导入的代码中添加console.log(pastExperience)，会看到输出的对象结构如下：

{
  0: { experienceID: 0, companyName: 'ABC' },
  1: { experienceID: 1, companyName: 'DEF' },
  __esModule: true,
  default: [
    { experienceID: 0, companyName: 'ABC' },
    { experienceID: 1, companyName: 'DEF' }
  ]
}

从这个结构就能直接看出为什么会多渲染两个元素。

内容的提问来源于stack exchange，提问作者chess_madridista