如何在Vue3中实时渲染含{{mydata.value_name}}的动态模板字符串？

要实现从接口获取模板字符串和动态数据后实时渲染组件，你可以按照以下步骤操作：

1. 确保Vue支持模板编译 #

Vue3默认的runtime构建版本不支持编译模板字符串，所以需要启用模板编译能力：

• 如果用Vite，在vite.config.js里配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue({
    template: { compilerOptions: {} } // 开启模板编译支持
  })]
})

2. 编写动态组件生成函数 #

封装一个工具函数，接收模板字符串和初始数据，返回可直接渲染的Vue组件：

import { defineComponent, h, reactive } from 'vue'

export function makeDynamicComponent(template, initialData) {
  return defineComponent({
    data() {
      // 将初始数据转为响应式对象，支持后续实时更新
      return reactive(initialData)
    },
    render() {
      // 编译模板字符串为Vue可识别的渲染函数
      const renderFn = this.$compile(template)
      return h(renderFn)
    }
  })
}

3. 发起请求并渲染动态组件 #

在父组件中调用接口，获取模板和数据后动态挂载组件：

<template>
  <div>
    <!-- 动态组件占位符，获取到组件实例后渲染 -->
    <component :is="dynamicComponent" v-if="dynamicComponent" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { makeDynamicComponent } from './utils'

const dynamicComponent = ref(null)

onMounted(async () => {
  try {
    // 调用目标接口获取模板和数据
    const response = await fetch('/someGate')
    const { template, data } = await response.json()
    
    // 生成动态组件并赋值
    dynamicComponent.value = makeDynamicComponent(template, data)
  } catch (err) {
    console.error('加载动态组件失败:', err)
  }
})
</script>

4. 接口响应格式要求 #

你的/someGate接口需要返回包含template和data字段的JSON：

{
  "template": "<div>{{mydata.value_name}}</div>",
  "data": {
    "mydata": {
      "value_name": "jim"
    }
  }
}

关键注意点 #

• 响应式更新：用reactive包裹初始数据，后续修改数据时模板会自动实时更新
• XSS风险：如果模板来自不可信来源，必须做安全过滤，避免注入攻击
• 变量匹配：模板中的变量名必须和返回的data结构完全对应，否则会出现渲染错误

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