vue3 <script> 内的写法

在 Vue 3 的 <script setup> 和传统 <script> 写法之间存在几个关键区别，主要体现在代码结构、功能支持和开发体验上。以下是详细对比：

1. 基本语法对比

<script setup>（Composition API 风格）

<script setup lang="ts">
// 直接编写逻辑，自动暴露顶层绑定
import { ref } from 'vue'
const count = ref(0)
</script>

• 特点：
  • 顶层变量/函数自动暴露给模板。
  • 无需手动注册组件或返回数据。
  • 天然支持 TypeScript。

传统 <script>（Options API 或 Composition API）

<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup() {
    const count = ref(0)
    return { count } // 需手动返回
  }
})
</script>

• 特点：
  • 需要 defineComponent 包裹。
  • Composition API 需在 setup() 函数内编写逻辑并显式返回。
  • Options API 需按 data、methods 等选项组织代码。

2. 核心区别

3. 功能差异详解

（1）Props & Emits 声明

• <script setup>：

  const props = defineProps<{ msg: string }>()
  const emit = defineEmits<{ (e: 'update'): void }>()
  

• 传统 <script>：

  export default defineComponent({
    props: { msg: String },
    emits: ['update'],
    setup(props, { emit }) { /* ... */ }
  })
  

（2）组件注册

• <script setup>：

  <script setup>
  import ChildComp from './Child.vue' // 自动注册
  </script>
  

• 传统 <script>：

  export default defineComponent({
    components: { ChildComp }, // 手动注册
    setup() { /* ... */ }
  })
  

（3）对外暴露方法

• <script setup>：
  使用 defineExpose：

  const publicMethod = () => {}
  defineExpose({ publicMethod })
  

• 传统 <script>：
  setup() 返回的方法自动暴露。

4. 编译差异

• <script setup>：
  • 在编译时转换为高效的渲染函数，无运行时性能开销。
  • 宏（如 defineProps）会被编译为静态代码。
• 传统 <script>：
  • Options API 依赖运行时解析，体积略大。

5. 使用场景建议

6. 代码转换示例

Options API → <script setup>

<!-- 传统 -->
<script>
export default {
  data() {
    return { count: 0 }
  },
  methods: {
    increment() { this.count++ }
  }
}
</script>

<!-- <script setup> -->
<script setup>
const count = ref(0)
const increment = () => count.value++
</script>

Composition API → <script setup>

<!-- 传统 -->
<script>
export default {
  setup() {
    const count = ref(0)
    return { count }
  }
}
</script>

<!-- <script setup> -->
<script setup>
const count = ref(0) // 自动暴露
</script>

总结

• <script setup> 是 Vue 3 的现代写法，适合追求简洁和 TypeScript 的项目，但需熟悉编译宏。
• 传统 <script> 更适合需要显式控制或兼容旧代码的场景。

选择时需权衡 开发效率、维护成本 和 团队习惯。