一个.vue文件中可以有两种写法么？选项式和组合式

在 Vue 3 中，一个 .vue 文件里可以同时使用组合式 API（Composition API）和选项式 API（Options API），因为 Vue 3 的设计目标之一就是允许开发者根据需要选择合适的 API 风格来编写代码。

虽然你可以同时使用这两种风格，但建议在单个组件中保持一致性，以避免代码风格混乱。以下是一个示例，展示如何在同一个 .vue 文件中混合使用组合式 API 和选项式 API：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="handleClick">点击我</button>
  </div>
</template>

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

// 使用组合式 API
const message = ref('Hello, Vue 3!');
const count = ref(0);

onMounted(() => {
  console.log('组件挂载了');
});

const handleClick = () => {
  count.value++;
  console.log('点击次数:', count.value);
};
</script>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      optionApiData: '这是选项式 API 的数据'
    };
  },
  methods: {
    optionApiMethod() {
      console.log('这是选项式 API 的方法');
    }
  },
  mounted() {
    console.log('选项式 API 的 mounted 生命周期钩子');
  }
};
</script>