Composition API

Composition API 是 Vue 3 中引入的一种新的组件逻辑组织方式。

它具有以下显著的优点：

• 更好的逻辑复用性：可以将相关的逻辑提取为独立的函数，然后在多个组件中复用。

• 更清晰的代码结构：将组件的不同逻辑（如状态、计算属性、方法等）按照功能进行分组和组织，使代码更易于理解和维护。

常见的 Composition API 钩子函数包括：

• ref：用于创建一个响应式的引用。

  const count = ref(0);

• reactive：创建一个响应式对象。

  const state = reactive({ name: 'John', age: 25 });

• computed：创建一个计算属性。

  const doubledCount = computed(() => count.value * 2);

• watch：监听响应式数据的变化。

  watch(count, (newValue, oldValue) => {
    // 处理变化的逻辑
  });

例如，在一个购物车组件中，可以使用 Composition API 来管理商品列表、总价计算和购物车操作等逻辑。  将相关的逻辑分别封装在不同的函数中，使整个组件的代码结构清晰明了，易于扩展和维护。