vue3中选项式 api 、组合式 api能能否混用

可以。vue3 中既可以使用选项式 api 也可以使用组合式 api，也可以混用。

备注：实际开发中，建议根据项目需求选择一种主要 API 风格，混合使用仅作为过渡或特殊场景的解决方案。

这里讲混用的两种方案：

1、同一个 vue 文件中写两个 script，分别写选项式 api、组合式 api 两种不同风格。

两个  <script>  之间的数据访问规则：

（1）选项式 API（普通  <script>）访问组合式 API（<script setup>）

不能直接访问，需要通过  expose  显式暴露组合式中的数据 / 方法：

（2）组合式 API（<script setup>）访问选项式 API（普通  <script>）

通过getCurrentInstance 获取实例访问：

<template><div><!-- 可以同时使用两种 API 定义的数据 -->选项式数据：{{ optionsCount }}<br>组合式数据：{{ setupCount }}<br>组合式访问选项式：{{ setupReadOptions }}<br></div>
</template><!-- 1. 选项式 API：普通 script 标签 -->
<script>
export default {data() {return {optionsCount: 100 // 选项式定义的数据};},methods: {optionsMethod() {return this.optionsCount * 2;}},mounted() {// 通过 this.$expose 访问组合式暴露的内容console.log(this.$expose.setupCount.value); // 200console.log(this.$expose.setupMethod()); // 400}
};
</script><!-- 2. 组合式 API：<script setup> 标签 -->
<script setup>
import { ref, computed, getCurrentInstance } from 'vue';// 组合式定义的数据
const setupCount = ref(200);// 组合式中访问选项式 API 的数据/方法
const instance = getCurrentInstance(); // 获取组件实例// 访问选项式的 data
const setupReadOptions = computed(() => {// 注意：需通过实例的 data 属性访问return instance?.data.optionsCount + setupCount.value;
});// 访问选项式的 methods
console.log(instance?.proxy.optionsMethod()); // 输出 200（100*2）
</script>

2、同一个vue文件中一个script，setup中通过defineOptions定义选项式 API 的方法：

（1）通过 defineOptions 使用选项式 api，defineOptions使用方式和 vue2 一样，比如 data、methods、props、computed、watch 等等

（2）数据访问规则：

（2.1）组合式 API（<script setup>）访问选项式 API（普通  <script>）

setup 中可以访问 defineOptions 中数据，通过 getCurrentInstance()获取当前实例对象，然后通过实例对象获取 data 数据

（2.2）选项式 API（普通  <script>）访问组合式 API（<script setup>）

defineOptions 访问自己的数据通过 this 的方式，也可以访问 setup 中数据，使用直接访问的方式

   <template><button @click="increment">{{ count }}</button></template><script setup>import { ref } from "vue";import { getCurrentInstance } from "vue";const count = ref(0);// 定义选项式 API 的方法defineOptions({data() {return { internalCount: 0 };},methods: {increment() {this.count++; // 这里的 this 可以访问 ref 数据（自动解包）this.internalCount++;},},});// 获取组件实例（不推荐频繁使用）const instance = getCurrentInstance();// 在 <script setup> 中访问 defineOptions 内部的 data（需通过实例）console.log(instance?.data.internalCount); // 0</script>