在vue3中定义组件的5种方式

在Vue 3中，定义组件的方式主要有以下五种：

1. 使用单文件组件（.vue）
2. 使用defineComponent函数
3. 使用setup函数
4. 使用<script setup>
5. 使用类式组件（仅限选项式API）

以下是每种方式的简单示例：

1. 单文件组件（.vue）:

<template>
  <div>{{ message }}</div>
</template>
 
<script>
export default {
  data() {
    return {
      message: 'Hello Vue 3!'
    };
  }
}
</script>

2. 使用defineComponent函数:

import { defineComponent } from 'vue';
 
export default defineComponent({
  data() {
    return {
      message: 'Hello Vue 3!'
    };
  }
});

3. 使用setup函数:

import { defineComponent, reactive } from 'vue';
 
export default defineComponent({
  setup() {
    const state = reactive({ message: 'Hello Vue 3!' });
    return { state };
  }
});

4. 使用<script setup> (Composition API):

<template>
  <div>{{ message }}</div>
</template>
 
<script setup>
import { ref } from 'vue';
 
const message = ref('Hello Vue 3!');
</script>

5. 使用类式组件（仅限选项式API）:

import Vue from 'vue';
 
export default new Vue({
  data() {
    return {
      message: 'Hello Vue 3!'
    };
  }
});

注意：Vue 3 推荐使用 Composition API，即 setup 函数和 <script setup>。选项式 API 已被视为过渡方案，并且在未来的版本中可能会被移除。