无渲染组件模式：将业务逻辑与视图完全解耦

深入探讨Vue中无渲染组件（Renderless Components）的设计思想与实现，通过作用域插槽将数据逻辑抽象为可复用的纯函数组件。 · 难度：入门 · +10XP

无渲染组件模式

传统组件通常同时包含模板和逻辑。无渲染组件只暴露数据与行为，不输出任何DOM结构，通过作用域插槽将控制权完全交给父组件。这种模式特别适合处理复杂表单验证、异步数据获取、拖拽排序等场景，让视图层实现完全自由。本教程将实现一个通用的异步数据查询组件，支持加载、错误、空数据三种状态，且不产生任何固定UI。

// AsyncData.vue
<template>
  <slot v-bind="{ data, loading, error }"></slot>
</template>
<script setup>
import { ref, watch } from 'vue'
const props = defineProps({ fetcher: Function })
const data = ref(null)
const loading = ref(false)
const error = ref(null)
watch(() => props.fetcher, async (fetcher) => {
  loading.value = true
  try {
    data.value = await fetcher()
  } catch (e) {
    error.value = e
  } finally {
    loading.value = false
  }
}, { immediate: true })
</script>