前端面试题---vue3中组合式api和选项式api的区别

选项式 API（Options API）

结构：通过 data、methods、computed 等选项定义组件的状态、方法和计算属性。

特点：适合小型、简单组件,代码易分散，不易维护。
示例：

export default {
  data() {
    return { message: 'Hello' };
  },
  methods: {
    changeMessage() {
      this.message = 'Hi';
    }
  }
}

组合式 API（Composition API）

结构：通过 setup() 函数，将状态、计算属性和方法集中管理，使用 ref、computed 等 API。

特点：适合复杂逻辑和大型项目，能提高代码复用性和可维护性，学习曲线较陡。
示例：

import { ref, computed } from 'vue';

export default {
  setup() {
    const message = ref('Hello');
    const reversedMessage = computed(() => message.value.split('').reverse().join(''));

    function changeMessage() {
      message.value = 'Hi';
    }

    return { message, reversedMessage, changeMessage };
  }
}

主要区别

选项式 API：结构分散，适合小型项目，逻辑复用困难。
组合式 API：逻辑集中，适合复杂项目，易于复用和维护。