从Vue2转Vue3：组合式API中JSX渲染的更优写法探讨

你提到的第二种写法和第一种本质上是等价的，但两者都存在不必要的函数嵌套，算不上更简洁的规范实践。

先拆解两种写法的逻辑：

• 写法1里，render是返回JSX的函数，最后返回() => render()，相当于套了一层匿名函数，每次组件渲染时会先调用这个匿名函数，再执行render得到JSX。
• 写法2里，render是返回渲染函数的函数，执行render()后得到的就是渲染函数，和写法1最终返回的结果完全一致，但多了一层函数嵌套，并没有简化代码。

Vue3中使用JSX的更优规范写法应该尽量减少冗余包装，以下两种方式更推荐：

方式1：直接内联返回渲染函数 #

如果渲染逻辑简单，直接在setup的返回值中定义渲染函数，代码最简洁：

import { ref, computed, defineComponent } from 'vue'
import HelloWorld from './components/HelloWorld.vue'

export default defineComponent({
    name: 'App',
    setup() {
        const name = ref<string>('Lily')
        const hello = computed((): string => `Hello ${name.value}!`)

        // 直接返回渲染函数
        return () => <HelloWorld msg={hello.value} />
    },
})

方式2：抽离渲染函数后直接返回 #

如果渲染逻辑复杂需要抽离，直接把render定义为渲染函数，然后返回它即可，不需要额外包装：

import { ref, computed, defineComponent } from 'vue'
import HelloWorld from './components/HelloWorld.vue'

export default defineComponent({
    name: 'App',
    setup() {
        const name = ref<string>('Lily')
        const hello = computed((): string => `Hello ${name.value}!`)

        const render = (): JSX.Element => <HelloWorld msg={hello.value} />

        // 直接返回render函数本身
        return render
    },
})

这两种写法都去掉了多余的函数嵌套，代码结构更清晰，也符合Vue3的组件编写规范。

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