I’m trying to enumerate the instances of a Vue component in order to ensure unique ids, and for that use a simple generator. Normally I would initiate the generator outside of the setup function:

const idGen = generateIds("component:my-component");

export default {
  setup() {
    const id = idGen.next().value;

    return {
      id,  // e.g. "component:my-component/0042"
    };
  },
};

However with the <script setup> sugar I’m not exactly sure how this is done. I know I can run side-effect in another <script> block which will only be executed once:

<script>
const idGen = generateIds("component:my-component");
</script>

However I don’t know I to access the shared idGen in my <script setup> to increment the enumerator and get the unique id.

<script setup>
// Where do I get idGen from the above <script>?
const id = idGen.next().value;
</script>

The only way I can think of to do this while using the <script setup> sugar is to initiate the generator in a separate file:

<script setup>
import { idGen } from "./id-generator.js";

const id = idGen.next().value;
</script>

The only problem is that it is a bit annoying to create a separate file just for this tiny logic which very much belongs with the component, so I would avoid it if I could.

CodePudding user response：

Edit: turns out the order is irrelevant after all

any <script> will run as normal

the code inside <script setup> is converted/compiled to a composition API "setup" function, and when that is called, all the top-level code in other <script> will have already executed, therefore idGen will already be available

so

Ignore the rest of this answer

Most vue3 <script setup> examples that use another <script> always show the order

<script setup></script>
<script></script>

<script>
const idGen = generateIds("component:my-component");
</script>

<script setup>
const id = idGen.next().value;
</script>

Note: you can have as many <script> tags in your SFC as you want, in any order, but only one <script setup>