Vue.js：能否在mounted钩子中返回自定义组件？尝试实现失败

问题原因 #

你在mounted钩子中直接将JSX格式的组件对象推入数组，但这种方式创建的组件实例并没有被Vue的渲染系统接管，也没有和模板绑定，所以无法渲染到页面上。Vue是声明式框架，组件渲染需要通过响应式数据结合模板语法实现，而非手动在钩子中创建组件对象。

解决方案 #

推荐采用声明式渲染的方式，通过响应式数据驱动组件渲染，具体步骤如下：

1. 注册自定义组件DatatabelCell
2. 在mounted中仅提取需要渲染的数据，而非直接创建组件
3. 利用模板的v-for语法遍历数据，动态渲染组件

修改后的完整代码

<template>
  <div class="table-container">
    <div v-for="(rowData, rowIdx) in filterData" :key="rowIdx" class="table-row">
      <DatatabelCell 
        v-for="(cellVal, colIdx) in rowData" 
        :key="colIdx" 
        :value="[cellVal]" 
      />
    </div>
  </div>
</template>

<script>
import DatatabelCell from "./DatatableCell";

export default {
  components: { DatatabelCell },
  data() {
    return {
      rows: [],
      columns: [
        { name: "Name", field: "name" },
        { name: "ID", field: "id" },
        { name: "Type", field: "brewery_type" },
        { name: "State", field: "state" },
      ],
      filterData: [],
    };
  },
  mounted() {
    const columns = this.columns;
    this.filterData = this.tableData.map(row => {
      return columns.map(column => row[column.field]);
    });
  },
};
</script>

特殊场景下的手动渲染（不推荐） #

如果因业务需求必须手动创建组件实例，可使用Vue底层API实现（以Vue3为例）：

import { createVNode, render } from 'vue';

// 在mounted钩子中
this.tableData.forEach(row => {
  this.columns.forEach(column => {
    const vnode = createVNode(DatatabelCell, { 
      value: [row[column.field]] 
    });
    // 需提前在模板中定义id为cell-container的元素
    render(vnode, document.getElementById('cell-container'));
  });
});

这种方式脱离Vue响应式系统，维护成本高，仅建议在特殊场景下使用。

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