vue2 中的export default和export default defineComponent

在Vue.js 2.x版本中，`export default` 和 `export default defineComponent` 是两种不同的导出组件的方式，它们在创建和组织 Vue 组件时扮演着关键角色。

1. **export default**: 这是最基本的导出方式，用于导出一个默认的 JavaScript 函数或对象。当你在 Vue 项目中使用 `export default` 导出一个组件时，你实际上是在导出一个包含 `options` 对象（包括模板、数据、生命周期钩子等）的对象。例如：

// components/App.vue
export default {
  template: '<div>App Component</div>',
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  methods: {
    sayHello() {
      alert(this.message);
    }
  }
}

2. **export default defineComponent**: 这是 Vue 2.x 版本引入的一种更现代的组件导出方式，它来自 Vue 3 的 `<script setup>` 功能。`defineComponent` 是 Vue 提供的一个特殊函数，允许你在 `setup` 函数中定义组件的逻辑，然后返回整个组件配置。这种方式更强调模块化和函数式编程思想，适用于使用 Composition API 的场景：

// components/App.vue
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const message = 'Hello, Vue!';
    
    function sayHello() {
      alert(message);
    }

    return {
      template: '<div>Say Hello: <button @click="sayHello">Click me</button></div>',
      sayHello
    };
  }
});