Vue 组件定义方式的区别

原始写法（函数式组件）
在 Vue 3 中，​​render 是保留属性名​​，与组件的渲染逻辑直接相关。即使未显式声明：如果父组件传递了 render 属性，Vue 会优先将其注入到 props 中（类似 key、ref 等内置属性）。
​​这是 Vue 的内部优化​​，确保渲染函数能直接访问。
import { h } from 'vue'const Render = (props, ctx) => {return props.render ? h(props.render, ctx.attrs, ctx.slots) : ''
}传递props
import { h, defineProps } from 'vue'const RenderComponent = (props) => {const { render, ...rest } = defineProps({render: {type: Function,required: true},scope: {type: Object,default: () => ({})}})return render ? h(render, rest) : null
}export default RenderComponent

export default Render
新写法（使用 defineComponent）
import { defineComponent } from 'vue'export default defineComponent({props: ['render'],setup(props, ctx) {return () => props.render ? h(props.render, ctx.attrs, ctx.slots) : ''}
})

主要区别

1. 组件类型
   ​​原始写法​​：函数式组件（Functional Component）
   无状态（无 this）
   无实例生命周期
   性能略高（Vue 3 中差异变小）
   ​​新写法​​：标准组件（使用 defineComponent）
   有组件实例
   完整的生命周期
   可以使用 Composition API 的全部功能
2. Props 声明
   ​​原始写法​​：隐式接收 props
   所有属性都通过 props 参数接收
   没有显式的 props 验证
   ​​新写法​​：显式声明 props
   通过 props 选项明确声明
   可以添加类型验证和默认值
3. 渲染机制
   ​​原始写法​​：直接返回渲染结果
   函数体本身就是渲染函数
   ​​新写法​​：通过 setup 返回渲染函数
   setup 返回一个函数（工厂函数）
   每次重新渲染都会调用这个工厂函数
4. 上下文访问
   ​​原始写法​​：通过第二个参数 ctx 访问
   包含 attrs、slots 和 emit
   ​​新写法​​：通过 setup 的第二个参数访问
   同样包含 attrs、slots 和 emit
   但组织方式更符合 Composition API 风格
5. TypeScript 支持
   ​​原始写法​​：类型推断有限
   ​​新写法​​：更好的 TypeScript 集成
   可以明确指定 props 类型
   更好的编辑器支持