循环内动态组件绑定触发无限循环问题及解决方案

使用以下代码在循环中动态加载组件时，站点的import操作陷入无限循环：

<template>
  <div>
    <div v-for="(user, userIndex) in users" :key="userIndex">
      <component 
        :is="() => import(`./${user.typ}CreateFields.vue`)" 
        v-model="users[userIndex]"
      />
    </div>
  </div>
</template>

请问是否无法在循环中使用动态组件？

解决方案 #

通过创建一个中间组件接管异步加载逻辑，循环即可正常工作：

<template>
  <component :is="myComponent" v-model="val" />
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';

@Component
export default class BeanstandetePositionCreateFields extends Vue {
    @Prop({ required: true })
    public value!: MyObject;

    public get val() {
        return this.value;
    }

    public set val(value: BeanstandetePositionCreate) {
        this.$emit('input', value);
    }

    public get myComponent() {
        const typ = this.val.typ;
        return () => import(`./${typ}CreateFields.vue`);
    }
}
</script>

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