在 Vue 3 中，如何在 `script setup` 内部导出 ` default `？

在Vue 3中，组件的导出通常是通过export default语法实现的。这是因为每个Vue组件都是一个独立的模块，而export default允许我们导出单个值，这在大部分情况下应该是组件对象本身。

在Vue 3组件的<script>标签内，我们通常以一个对象的形式编写组件的选项（比如data, methods, computed等），并将这个对象作为模块的默认导出。下面是一个具体的例子：

vue
<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      message: 'Hello from Vue!'
    }
  },
  methods: {
    greet() {
      console.log(this.message);
    }
  }
}
</script>

在这个例子中，我们创建了一个名为MyComponent的Vue组件，它有一个响应式数据message和一个方法greet。这个组件通过export default语法被导出，这使得其他文件可以通过import MyComponent from './MyComponent.vue'的方式来使用这个组件。

更高级的用法

除了简单的导出一个对象，Vue 3支持使用Composition API（组合API），这可以让我们更灵活地组织组件的逻辑。在使用Composition API时，我们可以通过setup函数来组织代码，而setup函数的返回值将决定哪些数据和方法是可供模板使用的。下面是一个使用Composition API的例子：

vue
<script>
import { ref, onMounted } from 'vue';

export default {
  name: 'MyComponent',
  setup() {
    const message = ref('Hello from Vue with Composition API!');

    onMounted(() => {
      console.log('Component is mounted');
    });

    // setup函数返回的对象决定了哪些响应式数据和函数可以在模板中使用
    return {
      message
    };
  }
}
</script>

在这个例子中，我们使用ref来创建一个响应式的数据message，并在组件挂载时打印一条消息。通过setup函数返回message，使得它可以在组件的模板中被访问和使用。

小结

在Vue 3中设置脚本内部的默认导出主要是通过export default实现的，无论是在使用Options API还是Composition API时。这种方式简洁明了，非常适合现代JavaScript的模块化开发方式。