如何在Vue.js中以符合规范的方式渲染多态列表？

我之前也碰到过一模一样的困扰——用字符串判断类型总觉得不够严谨，而instanceof又莫名其妙失效，折腾了好一阵才摸清楚Vue里处理多态列表的几种规范路子，分享给你：

1. 优先用Vue官方的动态组件（最优雅的方案） #

这绝对是Vue推荐的多态渲染方式，完全不用手动做类型判断，直接让Vue帮你处理：

<template>
  <div class="polymorphic-list">
    <component 
      v-for="item in items" 
      :key="item.id"
      :is="item.renderComponent"
      :item-data="item.data"
    />
  </div>
</template>

<script>
import ComponentX from './components/ComponentX.vue'
import ComponentY from './components/ComponentY.vue'

export default {
  components: { ComponentX, ComponentY },
  data() {
    return {
      items: [
        { id: 1, renderComponent: ComponentX, data: { name: 'X类型数据' } },
        { id: 2, renderComponent: 'ComponentY', data: { value: 123 } }
      ]
    }
  }
}
</script>

如果你的数组元素是自定义类的实例，还可以给类加一个返回对应组件的方法，完全贴合面向对象的多态思想：

// 自定义类
class TypeX {
  constructor(data) {
    this.data = data
  }
  get renderComponent() {
    return ComponentX
  }
}

// 模板里直接用
<component :is="item.renderComponent" :item-data="item.data" />

2. 用组件/类的标识属性替代自定义字符串 #

如果你暂时不想用动态组件，也别随便定义type: 'X'这种字符串，而是用更可靠的内置标识：

• 如果是Vue组件实例：直接用item.$options.name，这是组件注册时的名字，不会乱改：

  <ComponentX v-if="item.$options.name === 'ComponentX'" :data="item.data" />
  

• 如果是自定义类实例：给类加静态name属性或者实例级的类型标识，比手写字符串更严谨：

  class TypeY {
    static get typeName() { return 'TypeY' }
    // 或者实例属性
    get type() { return 'TypeY' }
  }
  

  然后模板里判断item.typeName === 'TypeY'，至少不用手动维护零散的字符串常量。

3. 修复instanceof失效的问题 #

如果一定要用instanceof，先搞清楚为什么失效：

• 最常见的原因是类的模块重复导入：比如你在两个地方分别导入了同一个类，但因为路径问题（比如相对路径写错、npm link导致的重复依赖），导致两个模块里的类是不同的构造函数，原型链不匹配。解决办法是统一从一个入口文件导出类，所有地方都从这里导入：

  // types/index.js
  export class TypeX {}
  export class TypeY {}
  
  // 其他文件都这样导入
  import { TypeX, TypeY } from './types/index.js'
  

• 如果是Vue组件的实例，要确保是通过正确方式创建的：比如用new ComponentX({ data: {...} })，而不是手动创建一个长得像组件实例的普通对象，后者当然不会通过instanceof检查。

总的来说，动态组件是最符合Vue设计理念的方案，代码简洁还能避免类型判断的冗余，推荐优先用这个。

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