面试题：如何在Vue项目中优雅地结合使用Options API和Composition API

逐步引入：
- 对于新功能模块，优先使用Composition API进行开发。这样可以充分利用Composition API的优势，如逻辑复用更方便、代码组织更清晰等，同时避免对现有Options API模块产生过多干扰。
- 例如，若要开发一个新的用户登录功能模块，直接采用Composition API来编写该模块的组件逻辑。

对现有Options API模块改造：

按照功能或逻辑单元逐步重构现有Options API模块为Composition API。比如，如果有一个管理用户信息的模块，可先将该模块中数据定义、方法等逐步转换为Composition API的方式。
先从数据部分开始，将data函数中的数据提取到setup函数中使用ref或reactive定义。例如：

// Options API
export default {
    data() {
        return {
            message: 'Hello'
        };
    }
};
// Composition API
import { ref } from 'vue';
export default {
    setup() {
        const message = ref('Hello');
        return {
            message
        };
    }
};

然后处理方法，将methods中的方法移到setup函数中定义。例如：

// Options API
export default {
    data() {
        return {
            count: 0
        };
    },
    methods: {
        increment() {
            this.count++;
        }
    }
};
// Composition API
import { ref } from 'vue';
export default {
    setup() {
        const count = ref(0);
        const increment = () => {
            count.value++;
        };
        return {
            count,
            increment
        };
    }
};

保持命名规范统一：
- 在整个项目中，无论是Options API还是Composition API部分，采用一致的命名规范。比如，对于数据变量，统一使用驼峰命名法；对于方法，采用动词开头的命名方式。例如，获取用户信息的方法统一命名为getUserInfo。

处理依赖注入：

在Options API中使用provide和inject，在Composition API中同样使用provide和inject，但要注意使用方式的一致性。例如：

// Options API
export default {
    provide() {
        return {
            user: this.user
        };
    }
};
// Composition API
import { provide } from 'vue';
export default {
    setup() {
        const user = ref({ name: 'John' });
        provide('user', user);
        return {};
    }
};

使用插件和工具辅助：
- 可以使用ESLint插件来规范代码风格，确保Options API和Composition API部分遵循相同的代码规则。例如，使用eslint-plugin-vue来强制统一代码格式、命名等规则。
- 利用Vue Devtools来调试和分析代码，及时发现潜在的冲突和问题。它可以帮助查看组件状态、数据流动等，有助于理解整个项目结构和逻辑。

星途面试题库

面试题：如何在Vue项目中优雅地结合使用Options API和Composition API

知识考点

面试题答案