vue中 export default 和＜script setup＞区别对比

慧一居士2026-01-17 8:24

在 Vue 3 中，export default 和

基本语法差异

export default（Options API）

vue 复制代码

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    console.log('组件已挂载')
  }
}
</script>

复制代码

2. 核心区别对比

特性 export default（Options API） <script setup>（Composition API）
语法 对象形式，需要包裹在对象中 直接编写代码，无需包裹
响应式 data() 返回对象 ref() 或 reactive()
方法定义 methods 对象中定义 直接定义函数
生命周期 生命周期钩子作为选项 导入并使用生命周期函数
组件注册 components 选项中注册 导入后直接使用
props 定义 props 选项 defineProps()
emit 定义 emits 选项 defineEmits()
暴露属性 默认暴露所有选项 需用 defineExpose() 显式暴露
代码组织 按选项类型分组 按逻辑功能组织

3. 详细示例对比

组件注册

```vue
<!-- export default -->
<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  }
}
</script>

<!-- script setup -->
<script setup>
import ChildComponent from './ChildComponent.vue'
// 直接使用，无需注册
</script>

Props 处理

vue 复制代码

<!-- export default -->
<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    }
  },
  setup(props) {
    // 在 setup 中使用
    console.log(props.title)
  }
}
</script>

<!-- script setup -->
<script setup>
const props = defineProps({
  title: {
    type: String,
    required: true
  }
})
// 直接使用 props.title
console.log(props.title)
</script>

计算属性

vue 复制代码

<!-- export default -->
<script>
export default {
  data() {
    return { count: 0 }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  }
}
</script>

<!-- script setup -->
<script setup>
import { ref, computed } from 'vue'

const count = ref(0)
const doubleCount = computed(() => count.value * 2)
</script>

优缺点分析

总的来说，<script setup> 是 Vue 3 推荐的方式，提供了更现代化的开发体验，而 export default 保持了更好的向后兼容性。

vue中 export default 和＜script setup＞ 区别对比

vue中 export default 和＜script setup＞区别对比