Vue3异步渲染（从后端获取未编译的Vue文件进行渲染）

个人使用场景，将部分功能展示完全可以通过服务端自定义（暂时不考虑性能问题）
后端直接返回一个未编译的Vue代码（可以包含指令，插槽），前端进行渲染

官方文档翻遍了，思路完全被带偏到defineAsyncComponent和JSX渲染上了，以及官方文档提到的h渲染，都可以实现，但是效果不尽人意，尤其是render+h，用json去构建html，至少达不到我的要求。

后来想到了原生html+vue.js 的方法，直接运行html就可以在前端实现Vue语法的编译，然后搜了一下，搜到了这篇文章 给了我一些思路

思路有了，后面又折腾了一阵，找到了解决方案
Vue3默认就是阉割版，默认关闭运行期编译，需要打开，在相关配置文件中配置即可（下面分别是vite项目和vitepress项目的配置）

// vite.config.js配置
export default {
  resolve: {
    alias: {
      vue: 'vue/dist/vue.esm-bundler.js'
    }
  }
}

// .vitepress/config.js配置
export default defineConfig({
  // 其他 VitePress 配置...
  vite: {
    // Vite 配置对象
    optimizeDeps: {
      include: ['vue'], // 确保 Vue 被包括在预构建依赖中
    },
    resolve: {
      alias: {
        // 配置 Vue 的别名，指向包含编译器的版本
        vue: 'vue/dist/vue.esm-bundler.js',
      },
    },
    // 如果你需要其他 Vite 配置，也可以在这里添加
  },
});

import {ref, defineProps, defineComponent } from 'vue';
const MyComponent = defineComponent({
  props: {
    data: {
      type: String,
      required: true
    }
  },
  //从后端获取以省略
  template: `
    <div>
      <h1>{{ data }}</h1>
    </div>
  `
});

//使用方法
<template>
	<MyComponent :data="scope.row"></MyComponent>
</template>