在 Vue 3.0 中，通过 defineComponent 创建的组件默认是具有响应式特性的组件，而函数式组件则不具备响应式能力，通常用于优化渲染性能，尤其是在一些简单的展示型组件上。
以下是一个简单的函数式组件的例子：
<script>
import { h, defineComponent } from 'vue';
const FunctionalComponent = defineComponent({
functional: true, // 设置为 true，声明为函数式组件
props: {
message: String
},
// render 函数接收两个参数，props 和 context
render(props, context) {
return h('div', `Message: ${props.message}`);
}
});
export default defineComponent({
data() {
return {
msg: 'Hello from Vue 3.0'
};
},
components: {
FunctionalComponent
},
template: `
<div>
<FunctionalComponent :message="msg" />
</div>
`
});
</script>
在上述例子中，FunctionalComponent 被声明为函数式组件，其 render 函数接收 props 和 context 两个参数。在 render 函数中，我们使用 h 函数创建一个 div 元素，显示了通过 props 传递过来的消息。
需要注意的是，函数式组件没有实例，因此没有生命周期钩子和实例方法。如果你需要使用 Composition API 的功能，可以在 setup 函数中使用。函数式组件通常适用于那些不需要状态和实例方法的简单展示型组件，可以有效提高渲染性能。
转载请注明出处：http://www.zyzy.cn/article/detail/547/Vue 3.0