面试题：Vue 3 中的Composition API 相比Vue 2 的Options API在代码规范方面的优势

Question

结合具体项目场景，说明Vue 3的Composition API 相比Vue 2 的Options API在代码组织、复用性及维护性方面遵循了哪些更好的代码规范，并举例说明如何利用Composition API 来优化代码结构。

Answer 1

代码组织

1. Options API 代码组织特点：在Vue 2的Options API中，一个组件的逻辑分散在各个选项（如data、methods、computed、watch等）中。例如，在一个用户信息展示组件中，与用户数据获取和显示相关的逻辑可能分布在data中定义数据，created钩子中获取数据，computed中处理数据显示格式。

<template>
  <div>
    <p>用户名: {{ user.name }}</p>
    <p>用户邮箱: {{ user.email }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {}
    };
  },
  created() {
    this.fetchUser();
  },
  methods: {
    async fetchUser() {
      const response = await fetch('/api/user');
      this.user = await response.json();
    }
  }
};
</script>

这种组织方式在组件逻辑复杂时，不同逻辑关注点交织在一起，难以快速定位和理解。

2. Composition API 代码组织优势：Vue 3的Composition API允许根据逻辑功能将代码组织在一起。例如，同样是用户信息展示组件，可将数据获取和相关逻辑封装在一个函数中。

<template>
  <div>
    <p>用户名: {{ user.name }}</p>
    <p>用户邮箱: {{ user.email }}</p>
  </div>
</template>

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

const fetchUser = async () => {
  const response = await fetch('/api/user');
  return await response.json();
};

const user = ref({});

onMounted(async () => {
  user.value = await fetchUser();
});
</script>

这样，获取用户数据的逻辑紧密关联，代码结构更清晰，便于理解和维护。

复用性

1. Options API 复用性局限：在Vue 2中，复用逻辑通常通过mixins实现。但mixins存在命名冲突问题，且多个mixins之间的依赖关系难以理清。例如，有两个mixins都定义了created钩子，会导致逻辑执行顺序不明确。

// mixin1.js
export const mixin1 = {
  created() {
    console.log('mixin1 created');
  }
};

// mixin2.js
export const mixin2 = {
  created() {
    console.log('mixin2 created');
  }
};

// component.vue
import { mixin1, mixin2 } from './mixins';

export default {
  mixins: [mixin1, mixin2],
  created() {
    console.log('component created');
  }
};

执行结果中mixin1 created、mixin2 created和component created的顺序难以预测。

2. Composition API 复用优势：Composition API通过自定义组合函数实现逻辑复用。组合函数可以返回多个响应式数据和函数，且不会有命名冲突问题。例如，创建一个用于处理表单验证的组合函数。

import { ref } from 'vue';

export const useFormValidation = () => {
  const isFormValid = ref(true);
  const validateForm = () => {
    // 实际验证逻辑
    isFormValid.value = true;
  };
  return {
    isFormValid,
    validateForm
  };
};

在组件中使用：

<template>
  <form @submit.prevent="validateForm">
    <!-- 表单内容 -->
    <button :disabled="!isFormValid">提交</button>
  </form>
</template>

<script setup>
import { useFormValidation } from './useFormValidation';

const { isFormValid, validateForm } = useFormValidation();
</script>

不同组件可独立使用该组合函数，复用性更好。

维护性

1. Options API 维护性挑战：随着项目规模增长，Options API组件内逻辑复杂，修改某个功能可能影响到其他不相关部分。例如，修改用户信息展示组件的数据获取逻辑，可能需要在data、created、methods等多个地方查找和修改代码，容易引入潜在错误。

2. Composition API 维护优势：Composition API按功能组织代码，修改某个功能只需定位到对应的组合函数或相关逻辑块。例如，若要修改用户信息展示组件的数据获取逻辑，只需修改fetchUser函数部分，不会影响到其他无关逻辑，降低维护成本。