Vue 3中如何实现元素条件式包裹，避免重复代码块？

核心问题 #

需要给元素添加条件式包裹，但不想通过v-if/v-else创建两个重复的代码块，同时又不想将内容抽象为子组件（避免状态传递和事件处理的繁琐），也不想手动编写复杂的渲染函数。

解决方案1：使用轻量功能性包裹组件 #

创建一个极简的通用包裹组件，仅负责根据条件决定是否渲染外层容器，内容通过插槽传入，完全保留原组件的状态上下文：

包裹组件（Wrap.vue） #

<script setup>
const props = defineProps({
  // 是否需要渲染外层容器
  wrap: Boolean,
  // 外层容器的标签类型，默认div
  wrapperTag: {
    type: String,
    default: 'div'
  },
  // 外层容器的类名
  wrapperClass: String
})
</script>

<template>
  <component 
    :is="wrap ? wrapperTag : 'template'" 
    :class="wrapperClass"
  >
    <slot />
  </component>
</template>

原组件中使用 #

<script setup>
import { ref } from 'vue'
import Wrap from './Wrap.vue'

const isMobile = ref(true)
</script>

<template>
  <Wrap :wrap="isMobile" wrapper-class="mobile-wrapper">
    <div class="product-meta">
      <!-- 原有的长HTML代码块，无需重复编写 -->
    </div>
  </Wrap>
</template>

这个方案的优势在于：

• 包裹组件无状态依赖，仅做逻辑转发
• 原组件的状态和事件完全保留在自身上下文，不需要处理父子组件传递
• 代码无重复，维护性高

解决方案2：使用JSX/渲染函数（适合熟悉Vue渲染逻辑的场景） #

如果不想额外创建组件，可以用JSX简化渲染逻辑（需确保项目支持JSX）：

<script setup lang="jsx">
import { ref } from 'vue'

const isMobile = ref(true)

const renderProductMeta = () => (
  <div class="product-meta">
    {/* 原有的长HTML内容，用JSX编写 */}
  </div>
)

const renderContent = () => {
  return isMobile.value 
    ? <div class="mobile-wrapper">{renderProductMeta()}</div>
    : renderProductMeta()
}
</script>

<template>
  <renderContent />
</template>

关于v-skip指令的RFC提案 #

目前Vue有一项新增v-skip指令的RFC提案，该指令的作用是：当条件为假时，跳过当前元素/组件的渲染，同时将其子节点直接提升到父层级中，与v-if完全移除节点的行为不同。

若该提案正式落地，可直接这样写：

<script setup>
const isMobile = ref(true)
</script>

<template>
  <div v-skip="!isMobile" class="mobile-wrapper">
    <div class="product-meta">
      <!-- 原有的长HTML代码块 -->
    </div>
  </div>
</template>

注意：该功能目前处于提案阶段，尚未正式纳入Vue版本，暂时无法使用。

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