Consider the following markup:

<template>
  <p
  v-for="experience of pastExperience"
  v-bind:key="experience.experienceID"
  >
    ID: {{ experience.experienceID }}
  </p>
</template>

In the <script> section:

1. Using wildcard import:

import * as pastExperience from 'filePath';

export default {
  name: "WorkHistory",
  data() {
    return {
      pastExperience: pastExperience,
    };
  },
};

2. Using named import:

import pastExperience from 'filePath';

export default {
  name: "WorkHistory",
  data() {
    return {
      pastExperience: pastExperience,
    };
  },
};

The outputs are as follows:

1. Using method #1:

2. Using method #2:

For reference, here is the basic structure of the json file:

[
  {
    "experienceID": 0,
    "companyName": "ABC"
  },
  {
    "experienceID": 1,
    "companyName: "DEF"
  }
]

Why are two extra paragraphs rendered when I import the json file via the wildcard method? What happens exactly in Vue v2 behind the scenes which causes this behaviour?

CodePudding user response：

In the general case, they do entirely different things.

import * as x from "./mod.js"; imports a module namespace object for the mod.js module, which is a synthetically-generated object containing properties for all of the module's named exports, if any, and a default property for the default export, if any.

import x from "./mod.js"; only imports the default export of the mod.js module, if any, not its named exports.

But some modules may be defined such that the default export is an object with properties for all of the named exports, and so in that case they can seem very much the same, but they still aren't: real exports are live bindings, but exporting an object with properties for the named exports as the default export won't update those properties if they change in the source module. But in modules defined in that dual way, the exports are usually static anyway.

Consider mod.js:

export let a = 42;
export default function example() {
    console.log("Example");
}

Using import * as x from "./mod.js" would make x a reference to the module namespace object for the module, with the properties a (the number 42, initially) and default (the example function:

import * as x from "./mod.js";
console.log(x.a); // Logs 42
x.default(); // Logs "Example"

In contrast, import x from "./mod.js"; would make x a live binding to the example function.

import x from "./mod.js";
x(); // Logs "Example"

But if the module is defined in that dual way, both with named exports and a default exported module, like this:

export let a = 42;
export function example() {
    console.log("Example");
}
export default {
    a,
    example
};

Then import * as x from "./dual.js"; would give us a module namespace object with a, example, and default properties, and import x from "./dual.js"; would give us an object (not the module namespace object) with a and example properties, which is of course very similar. The difference is that the former will see changes to a if any are made, and the latter won't.