export default 与setup比较

`export default` 和 `setup` 是两个在不同场景下用于Vue.js组件开发的语法点。

`export default` 是传统的Vue组件导出方式，在每个.vue文件中，如果有一个顶层的对象或函数，通常我们会将其设置为默认导出。例如：

// components/Home.vue
export default {
  data() {
    return { name: 'Home' };
  },
  methods: {
    sayHello() {
      console.log('Hello from Home');
    }
  }
};

这个`default`关键字指示该对象将成为整个模块的导出值，外部可以像这样导入并使用它：

import Home from './components/Home.vue';
const homeInstance = new Home();
homeInstance.sayHello(); // 输出 "Hello from Home"

而 `setup()` 是Vue 3中引入的现代模式（Composition API），它是一个自包含的函数，返回一个`setupContext`对象，包括了响应式数据和生命期钩子等。在`.vue` 文件中，`setup` 函数通常这样使用：

<template>
  <div>Hello, {{ message }}</div>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('World');
</script>

`setup`允许更模块化的代码组织，避免全局状态，使得组件更易于测试，并且可以更高效地利用Reactivity系统。外部可以通过`setup`返回的对象获取数据和方法：

import { createApp } from 'vue';
import Home from './Home.vue';

const app = createApp(Home);
app.mount('#root');