Vue学习---vue选项式api（Option API）和组合式api（Composition API）

Vue中的选项式API和组合式API是两种不同的编写组件逻辑的方法。

选项式API和组合式API各有优势，Vue 3推荐使用组合式API进行开发，因为它更加灵活和现代化，同时也更容易与Vue的其他新特性如Vuex、Vite等集成。

选项式API（Options API）：

• 使用data()、methods{}、computed{}等函数组织起一个单独的组件。
• 每个组件都是一个对象，对象中包含了组件的生命周期钩子、数据、方法等。
• 代码可能会分散在不同的选项中，难以一眼看出数据的变化和逻辑的流动。
• 适用场景：适合较小或中等复杂度的应用，以及那些已经习惯于这种编程范式的Vue开发者。

// Options API
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
}

组合式API（Composition API）：

• 使用setup函数作为组件的入口点。在这个函数里，你可以使用各种组合式 API，如ref, reactive, computed, watchEffect等来构建组件逻辑。
• 更符合现代JavaScript开发的模式，可以更自然地使用函数、闭包等特性来管理状态和逻辑。
• 需要Vue 3环境，Vue 2不支持。
• 适用场景：适合构建大型应用和更复杂的组件，特别是当需要在多个组件之间共享逻辑时。

// Composition API
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const count = ref(0);

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

    onMounted(() => {
      console.log('Component is mounted!');
    });

    return { count, increment };
  }
}