vue 3.0 所采用的 Composition Api 和 vue 2.0 使用的 Option Api 区别

Vue 3.0引入了Composition API，与Vue 2.x使用的Options API有一些区别。Composition API的目标是改善代码的可重用性和组合性，使代码更易于维护和理解。下面是Composition API和Options API之间的一些区别：

1. 组织代码的方式：

   • Options API：将所有相关的选项放在一个对象中，如data、methods、computed等，代码容易变得臃肿，逻辑难以追踪。
   • Composition API：将逻辑按功能组织，每个功能可以单独使用，使代码更清晰、模块化和可维护。

2. 数据响应式：

   • Options API：使用data选项定义响应式数据。
   • Composition API：使用reactive函数创建响应式数据，并使用ref将普通值转换为响应式数据。

3. 生命周期钩子：

   • Options API：使用不同的生命周期钩子函数来操作组件生命周期。
   • Composition API：通过onMounted、onUpdated等函数来代替生命周期钩子。

4. 跟踪依赖和副作用：

   • Options API：通过computed和watch函数跟踪依赖和副作用。
   • Composition API：通过ref、computed和watch函数来实现类似的功能。

下面是一个示例，演示了如何使用Composition API和Options API来实现相同的功能：

使用Options API：

<template>
  <div>
    <button @click="increaseCount">Increase Count</button>
    <p>{
   
   { count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increaseCount() {
      this.count++;
    }
  }
};
</script>

使用Composition API：

<template>
  <div>
    <button @click="increaseCount">Increase Count</button>
    <p>{
   
   { count }}</p>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0
    });

    function increaseCount() {
      state.count++;
    }

    return {
      count: state.count,
      increaseCount
    };
  }
};
</script>

在上面的示例中，Options API将所有东西放在一个对象中，而Composition API将逻辑按功能进行组织，使其更易于理解和维护。