如何在没有模板部分的 Vue SFC 中使用新的 <script setup> 语法？答案

【问题标题】：How can I use new <script setup> syntax in Vue SFC without template section?如何在没有模板部分的 Vue SFC 中使用新的 <script setup> 语法？
【发布时间】：2021-11-11 02:40:02
【问题描述】：

当我尝试使用 <script setup> 但不使用 <template> 编写 SFC 时，我在控制台 [Vue warn] Component is missing template or render function 中收到警告。

有什么解决办法吗？

【问题讨论】：

标签： vue.js vue-component vuejs3 vue-sfc vue-script-setup

【解决方案1】：

显然，您需要一个模板或渲染函数。由于不想使用模板，可以考虑使用渲染函数。

很遗憾，渲染功能似乎不适用于设置。

<script lang="ts">
export default defineComponent({
  render() {
    return h("div", {}, this.a);
  }
});
</script>

<script lang="ts" setup>
import { defineComponent, ref, h } from "vue";

const a = ref(1);
</script>

<style scoped></style>

更多信息，您可以在此处查看render-function(official doc)。

【讨论】：

我有几个无渲染组件，所以，它的渲染功能只是() => null
@dmitriy-korobkov 我有一个问题，如果没有渲染，为什么它是一个组件。如果必须，请尝试在渲染函数中返回 null。
无渲染组件在某些情况下是有用的模式。现在应该以老式风格返回 () => null 作为渲染函数。

【解决方案2】：

Vuejs dev answers，在这种情况下可以使用空的<template>。

【讨论】：