Vue 3组件开发的7种写法：什么时候用，什么时候不用
最近在团队里做了一次代码Review，发现一个有意思的现象。同样是用Vue 3写组件，不同人写出来的代码风格差别很大。
有人喜欢用setup语法糖，有人还在用选项式，还有人开始在.tsx文件里写函数式组件。
我问他们为什么这么写。答案五花八门：习惯了、看着舒服、网上教程就是这么教的。
这让我想一个问题：Vue组件的写法真的有对错之分吗？还是说每种写法都有它适合的场景。
这篇文章不打算列一个“20种写法”的清单。我想从开发思路的角度，聊聊Vue组件开发中真正值得关注的7种写法，以及什么时候该用哪一种。
一、声明式思维：用好模板语法
这是Vue最基础的用法，也是大多数人的起点。写一个template，里面放HTML，绑定数据，完事。
<template>
<div class="user-card">
<h3>{{ user.name }}</h3>
<p>{{ user.email }}</p>
</div>
</template>
<script setup>
const user = { name: '张三', email: 'zhang@example.com' }
</script>这种写法最大的好处不是简单，而是逼着你想清楚一件事：数据长什么样，界面就长什么样。你不用管DOM怎么创建、属性怎么更新，只管数据就行。
对于大部分组件来说，这就是最好的写法。
二、逻辑聚焦：把散落的代码收在一起
Vue 2时代，我们习惯这样写：
<script>
export default {
data() {
return { count: 0, user: null }
},
mounted() {
this.fetchUser()
},
methods: {
fetchUser() { /* ... */ },
increment() { this.count++ }
}
}
</script>组件小的时候没问题。但组件变大了，你会发现count的逻辑散落在data和methods里，user的逻辑又横跨data、mounted、methods。想改一个功能，得在文件里上下翻找。
Vue 3的setup语法糖解决了这个问题：
<script setup>
import { ref, onMounted } from 'vue'
// count相关的放在一起
const count = ref(0)
const increment = () => count.value++
// user相关的放在一起
const user = ref(null)
const fetchUser = async () => { /* ... */ }
onMounted(fetchUser)
</script>按功能聚合，而不是按类型聚合，代码会好维护很多。
三、可组合性：抽离重复逻辑
当你发现两个组件里有相似的逻辑，比如都要处理表格分页、都要监听窗口大小、都要轮询请求数据，就该考虑composables了。
// composables/useCounter.js
import { ref } from 'vue'
export function useCounter(initialValue = 0) {
const count = ref(initialValue)
const increment = () => count.value++
const decrement = () => count.value--
return { count, increment, decrement }
}在组件里直接用：
<script setup>
import { useCounter } from './composables/useCounter'
const { count, increment } = useCounter(10)
</script>刚开始写composables容易犯一个错：什么都要抽出来。我的原则是，至少要在两个地方用到，或者逻辑够复杂（超过20行），再考虑抽。
四、灵活渲染：从模板到h函数
当模板语法不够用的时候，可以直接写JavaScript来生成虚拟DOM。
什么情况不够用？举个例子，你需要根据一个复杂的配置对象动态生成多层嵌套的组件，用v-if和v-for会写出很臃肿的模板。
这时候可以用h函数：
<script setup>
import { h } from 'vue'
const config = {
type: 'div',
children: 'Hello',
props: { class: 'box' }
}
const render = () => h(config.type, config.props, config.children)
</script>
<template>
<render />
</template>不用刻意用h函数，但要会用它。平时用模板就够了，遇到特殊情况再切过来。
五、JSX的平衡点：灵活与规范
JSX在Vue里一直有争议。有人说违背了Vue的设计哲学，有人说真好用。
我的看法是：把它当工具，别当信仰。
// UserCard.tsx
import { defineComponent, ref } from 'vue'
export default defineComponent({
setup() {
const count = ref(0)
return () => (
<div>
<span>Count: {count.value}</span>
<button onClick={() => count.value++}>+1</button>
</div>
)
}
})什么时候用JSX？我总结了三个场景：
高度动态的UI，比如可视化配置平台，组件结构完全由后端返回的JSON决定
需要大量条件判断，十几个v-if嵌套时，用if/else或switch更清晰
团队习惯，如果团队里React和Vue混用，统一用JSX可以减少切换成本
但大多数时候，template依然是最清晰的选择。
六、函数式组件：轻量时刻
函数式组件是无状态、无实例、只有props的组件，像纯函数一样渲染。
// Greeting.tsx
function Greeting(props: { name: string }) {
return <div>Hello, {props.name}!</div>
}
Greeting.props = { name: String }
export default Greeting函数式组件没有实例，不创建this，渲染开销更小。对于大量的列表项、表格单元格这种纯展示型组件，可以考虑用函数式。
但要注意，Vue 3的普通组件已经很快了。不要为了性能牺牲可读性。只有当你确实遇到渲染瓶颈，而且分析确认是组件实例太多导致的，再考虑优化。
七、运行时决策：动态组件和异步加载
这个有点进阶，但很实用。把“选哪个组件”的决定权从编译时推迟到运行时。
<template>
<component :is="currentComponent" :data="someData" />
</template>
<script setup>
import { shallowRef } from 'vue'
import ChartA from './ChartA.vue'
import ChartB from './ChartB.vue'
const currentComponent = shallowRef(ChartA)
const switchChart = (type) => {
currentComponent.value = type === 'A' ? ChartA : ChartB
}
</script>再结合异步加载，可以做到按需加载组件：
<script setup>
import { defineAsyncComponent } from 'vue'
const HeavyChart = defineAsyncComponent(() =>
import('./HeavyChart.vue')
)
</script>这种写法让你的应用能根据情况决定加载什么、渲染什么，对大应用来说很有用。
总结
Vue组件怎么写，说到底不是选择题，而是填空题。你要根据当前场景，填上最合适的解法。
没有最佳写法，只有最适合当前场景的写法。理解了这7种写法，遇到复杂需求就不会慌，因为你心里清楚：这个场景可以用动态组件，那个需求换JSX会更顺手。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
