目录
前言
一、最直观的对比：结构差异
1、语法糖写法（你熟悉的）
2、传统写法（公司项目常见）
二、响应式数据的定义
三、方法的定义与使用
四、生命周期钩子
五、Props 与 Emits
1、语法糖写法
2、传统写法
六、完整示例对比
1、你习惯的写法（语法糖）
2、公司项目的写法（传统）
七、快速转换口诀
八、常见错误与解决
九、总结
写在最后
前言
在 Vue3 开发中，
<script setup>语法糖凭借其简洁、直观的写法，已经成为大多数开发者的首选。但当你加入一个新团队，或者维护一个老项目时，可能会遇到使用传统<script>写法的代码。面对
export default { setup() { ... } }这样的结构，很多习惯了语法糖的同学会感到困惑：为什么还要手动 return？props 怎么定义？生命周期还能用吗？本文将用对比学习的方式，帮你快速掌握传统
<script>的核心写法，让你无缝切换两种开发模式。
一、最直观的对比：结构差异
1、语法糖写法（你熟悉的）
<script setup> import { ref } from 'vue' const count = ref(0) const increment = () => count.value++ // 自动暴露给模板，无需 return </script>2、传统写法（公司项目常见）
<script> import { ref } from 'vue' export default { setup() { const count = ref(0) const increment = () => count.value++ // 必须手动 return，模板才能使用 return { count, increment } } } </script>核心差异：语法糖自动 return 所有顶层绑定，传统写法需要你手动 return。
二、响应式数据的定义
| 场景 | <script setup> | 传统<script> |
|---|---|---|
| ref 定义 | const num = ref(0) | 同上，但要 return |
| reactive 定义 | const state = reactive({}) | 同上，但要 return |
| 模板中使用 | 直接{{ num }} | 直接{{ num }} |
示例代码：
<!-- 传统写法 --> <script> import { ref, reactive } from 'vue' export default { setup() { const count = ref(10) const user = reactive({ name: 'Alice', age: 18 }) return { count, user } } } </script> <template> <p>{{ count }}</p> <p>{{ user.name }}</p> </template>三、方法的定义与使用
异步方法、普通方法写法完全一致，唯一区别仍然是return。
<script> import { ref } from 'vue' import { getUserInfo } from '@/api/user' export default { setup() { const data = ref(null) const loading = ref(false) const fetchData = async () => { loading.value = true const res = await getUserInfo() data.value = res.data loading.value = false } // 方法也需要 return return { data, loading, fetchData } } } </script>四、生命周期钩子
生命周期钩子的用法完全一致，因为都是在
setup()函数内部调用。
<script> import { onMounted, onUnmounted } from 'vue' export default { setup() { onMounted(() => { console.log('组件已挂载') }) onUnmounted(() => { console.log('组件即将卸载') }) return {} } } </script>五、Props 与 Emits
这是最容易混淆的地方，对比来看更清晰。
1、语法糖写法
<script setup> const props = defineProps(['title', 'id']) const emit = defineEmits(['update', 'close']) emit('update', 'new value') </script>2、传统写法
<script> export default { props: ['title', 'id'], emits: ['update', 'close'], setup(props, { emit }) { emit('update', 'new value') return {} } } </script>注意：
props是响应式对象，不要解构它，否则会失去响应性。
六、完整示例对比
1、你习惯的写法（语法糖）
<script setup> import { ref, onMounted } from 'vue' import { getArticleList } from '@/api/article' const articles = ref([]) const loading = ref(false) const loadArticles = async () => { loading.value = true const res = await getArticleList() articles.value = res.data loading.value = false } onMounted(() => { loadArticles() }) </script>2、公司项目的写法（传统）
<script> import { ref, onMounted } from 'vue' import { getArticleList } from '@/api/article' export default { setup() { const articles = ref([]) const loading = ref(false) const loadArticles = async () => { loading.value = true const res = await getArticleList() articles.value = res.data loading.value = false } onMounted(() => { loadArticles() }) // 关键：把所有要在模板中用的变量和函数都 return return { articles, loading, loadArticles } } } </script>七、快速转换口诀
所有代码放进
setup() { } ，用到的变量/函数必须return出去props 单独写在
props选项中emits 单独写在
emits选项中生命周期钩子用法不变
八、常见错误与解决
| 错误现象 | 原因 | 解决方案 |
|---|---|---|
| 模板中显示 undefined | 变量没 return | 添加到 return 对象中 |
| props 不更新 | 解构了 props | 直接使用props.xxx |
| emit 不生效 | 没声明 emits | 添加emits: ['事件名'] |
| this 报错 | 想用 this.xxx | 直接用变量名，没有 this |
九、总结
| 特性 | <script setup> | 传统<script> |
|---|---|---|
| 代码量 | 更少 | 稍多（需要 return） |
| 学习曲线 | 平缓 | 稍陡 |
| 组件实例 | 无 this | 无 this（setup 中也没有） |
| 适用场景 | 新项目、组件库 | 老项目、复杂配置 |
核心思想：两种写法本质是一样的，传统写法只是把语法糖“自动做的事”变成了“手动做”。理解
setup()函数 +return这个机制，你就能轻松看懂任何传统写法的 Vue 组件。
写在最后
如果你刚接触传统写法，不用慌。先把
return { }里的内容当作“模板能用的东西清单”，看不懂的代码就找这个清单。多写几次就能完全掌握。
希望这篇文章能帮助你快速适应公司项目的代码风格。如果有任何疑问，欢迎在评论区留言交流！
