如何在Vue 3中通过编程方式创建动态DOM元素？

在React中，我可以进行如下操作：

const childElements = [];

if (myCondition) {
  childElements.push(<div/>);
  childElements.push(<span/>);
}

...
return <div>{childElements}</div>

这种技术在创建具有高度动态内容的组件时非常强大。请问在Vue 3中是否有类似的实现方式？还是只能使用模板中已有的元素？

当然有，Vue 3完全支持这种动态创建元素集合的需求，下面是几种常用实现方式：

1. 用渲染函数（h 函数） #

和React的写法逻辑一致，你可以直接在组件里通过h函数创建元素并收集到数组中，最后返回渲染结果：

import { h } from 'vue'

export default {
  setup(props) {
    const childElements = []
    const myCondition = true // 替换成你的实际条件

    if (myCondition) {
      childElements.push(h('div'))
      childElements.push(h('span'))
    }

    // 返回一个渲染函数
    return () => h('div', {}, childElements)
  }
}

如果是<script setup>的单文件组件，也可以这么写：

<script setup>
import { h } from 'vue'

const myCondition = true
const childElements = []

if (myCondition) {
  childElements.push(h('div'))
  childElements.push(h('span'))
}

// 定义渲染函数
const renderContent = () => h('div', {}, childElements)
</script>

<template>
  <renderContent />
</template>

2. 模板中结合数组与v-for #

如果习惯用模板语法，可以在逻辑层维护一个描述元素的配置数组，再用v-for和动态组件渲染：

<script setup>
import { ref } from 'vue'

const myCondition = true
const dynamicElements = ref([])

if (myCondition) {
  // 用对象描述元素，也可以添加props、内容等
  dynamicElements.value.push({ tag: 'div' })
  dynamicElements.value.push({ tag: 'span' })
}
</script>

<template>
  <div>
    <component 
      :is="item.tag" 
      v-for="(item, index) in dynamicElements" 
      :key="index" 
    />
  </div>
</template>

要是需要渲染自定义组件，直接把tag的值换成组件对象就行，比如import MyComponent from './MyComponent.vue'，然后push({ tag: MyComponent })。

3. 使用JSX（需配置支持） #

如果项目配置了JSX支持（比如Vite安装@vitejs/plugin-vue-jsx），写法和React几乎一模一样：

<script setup lang="jsx">
const myCondition = true
const childElements = []

if (myCondition) {
  childElements.push(<div />)
  childElements.push(<span />)
}

const renderContent = () => <div>{childElements}</div>
</script>

<template>
  <renderContent />
</template>

总结一下，Vue 3不仅支持这种动态内容创建，还提供了多种适配不同开发习惯的实现方式，完全不用局限于模板里预先写死的元素。

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