Vue3核心语法:OptionsAPI 与 CompositionAPI

【OptionsAPI 与 CompositionAPI】

• Vue2的API设计是Options（配置）风格的。
• Vue3的API设计是Composition（组合）风格的。

Options API 的弊端

Options类型的 API，数据、方法、计算属性等，是分散在：data、methods、computed中的，若想新增或者修改一个需求，就需要分别修改：data、methods、computed，不便于维护和复用。

### Composition API 的优势

可以用函数的方式，更加优雅的组织代码，让相关功能的代码更加有序的组织在一起。

Vue.js 是一个用于构建用户界面的渐进式框架，它从版本 2 升级到了版本 3。在这个过程中，Vue 引入了一些新特性和改进，其中包括 Options API 和 Composition API。

Vue 2 的 Options API

在 Vue 2 中，组件的逻辑主要通过 options 对象来组织。这个对象包含了组件的多种选项，如 data、methods、computed、watch 等。Options API 是 Vue 2 中使用的主要方式，它以类式的组织结构来定义组件：

export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  },
  computed: {
    doubledCount() {
      return this.count * 2;
    }
  }
};

Vue 3 的 Composition API

Vue 3 引入了 Composition API，这是一种新的编写组件逻辑的方式。它允许开发者以更灵活的方式组织组件逻辑，特别是对于大型组件，可以更好地复用逻辑和逻辑隔离。Composition API 基于函数和钩子（hooks），提供了一种更声明式的方式来编写组件：

import { ref, computed, onMounted } from 'vue';

export default {
  setup() {
    const count = ref(0);
    
    const doubledCount = computed(() => count.value * 2);

    function increment() {
      count.value++;
    }

    onMounted(() => {
      console.log(`The count is ${count.value}`);
    });

    return {
      count,
      doubledCount,
      increment
    };
  }
};

两者的区别

1. 组织方式：Options API 是基于类和选项的，而 Composition API 是基于函数和钩子的。
2. 逻辑复用：Composition API 使得逻辑更容易复用，因为它允许将逻辑分解成独立可复用的函数。
3. 逻辑隔离：Composition API 支持更好的逻辑隔离，特别是在处理复杂的组件时。
4. 模板引用：在 Options API 中，模板直接引用 this 上的属性和方法；而在 Composition API 中，所有的数据和方法都通过 setup 函数的返回值暴露给模板。
5. 生命周期管理：Options API 中的生命周期钩子（如 created、mounted）与 Composition API 中的生命周期钩子（如 onMounted、onUnmounted）有所不同。

兼容性

值得注意的是，Vue 3 并没有完全废弃 Options API，而是提供了两种方式供开发者选择。开发者可以根据自己的喜好和项目需求选择使用 Options API 或 Composition API，甚至在同一个项目中同时使用两者。这为从 Vue 2 迁移到 Vue 3 提供了平滑的过渡路径。

Vue 3 的 Composition API 为开发者提供了一种新的、更灵活的方式来构建组件，但同时也需要一定的学习曲线。对于已经熟悉 Options API 的开发者来说，可能需要一些时间来适应 Composition API 的新概念和模式。

简单的总结：当你使用vue2的时候，新增一个功能，可能要在很多位置调整代码，维护起来麻烦，使用vue3之后，代码的可维护性变得更高了。 就类似于你做UI自动化，用PO模式和不用PO模式对代码的可维护性。