阐述 Vue 3 中的 `Composition API` 如何为大型项目和复杂逻辑提供了更优雅、可测试的解决方案。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女，老司机们好！今天咱们来聊聊Vue 3里那颗闪耀的明星——Composition API。这玩意儿啊，就像给你的代码做了个大保健，让它更强壮，更灵活，更能经受住大型项目的蹂躏。

前言：Options API 的 “甜蜜的负担”

在Vue 2时代，我们用的是Options API，也就是 data、methods、computed、watch 这种方式来组织代码。这种方式对于小型项目来说，简直是小菜一碟，简单易懂，上手快。

但是！但是！当你的项目越来越大，组件越来越复杂的时候，Options API的缺点就暴露出来了。

代码组织混乱： 当你需要处理一个复杂的业务逻辑时，相关的代码可能会散落在 data、methods、computed 等不同的地方，导致代码难以阅读和维护。这就像你的房间，刚开始还算整洁，东西不多，随便放放没啥问题。但东西一多，到处乱塞，找个袜子都得翻箱倒柜。
代码复用困难： 如果你想在多个组件之间复用一段逻辑，你可能需要使用 mixins。但是 mixins 有两个问题：
- 命名冲突：不同的 mixins 可能会有相同的 data 或 methods，导致命名冲突。
- 隐式依赖：mixins 会将自己的 data 和 methods 注入到组件中，但你很难知道这些 data 和 methods 都是从哪里来的，这会增加代码的理解难度。
类型推断困难： 在 TypeScript 中使用 Options API 时，类型推断可能会出现问题，你需要手动指定很多类型，这会增加代码的编写成本。

所以，Options API就像一个“甜蜜的负担”，刚开始觉得很甜，但时间久了，就觉得太重了。

Composition API：代码组织的救星

Vue 3 引入了 Composition API，它提供了一种更灵活、更强大的代码组织方式。Composition API的核心思想是：把相关的逻辑组织在一起，形成一个独立的函数，然后在组件中调用这个函数。

这就像把你的房间重新装修了一下，把衣服、鞋子、书籍等物品都分类整理好，放在不同的柜子里。这样一来，你的房间就变得井井有条，找东西也方便多了。

Composition API 的优势

更好的代码组织： Composition API 可以让你把相关的逻辑组织在一起，形成一个独立的函数，这使得代码更容易阅读和维护。
更高的代码复用性： 你可以将一个 Composition API 函数在多个组件中复用，而不用担心命名冲突或隐式依赖的问题。
更好的类型推断： 在 TypeScript 中使用 Composition API 时，类型推断会更加准确，你可以减少手动指定类型的次数。
更强的可测试性： Composition API 函数可以独立进行单元测试，这使得代码更容易测试。

Composition API 的基本语法

Composition API 的基本语法如下：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    // 创建一个响应式变量
    const count = ref(0);

    // 定义一个方法
    const increment = () => {
      count.value++;
    };

    // 组件挂载后执行的钩子函数
    onMounted(() => {
      console.log('Component mounted!');
    });

    // 返回需要在模板中使用的变量和方法
    return {
      count,
      increment
    };
  }
};
</script>

setup()：这是 Composition API 的入口函数，所有逻辑都应该在这个函数中编写。
ref()：用于创建一个响应式变量。
reactive()：用于创建一个响应式对象。
computed()：用于创建一个计算属性。
watch()：用于监听一个响应式变量的变化。
onMounted()：组件挂载后执行的钩子函数。
onUpdated()：组件更新后执行的钩子函数。
onUnmounted()：组件卸载前执行的钩子函数。
provide() 和 inject()：用于在组件之间共享数据。

Composition API 的实战演练

接下来，我们通过几个例子来演示 Composition API 的使用。

1. 计数器组件

这是最简单的例子，用于演示 ref() 的使用。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

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

    const increment = () => {
      count.value++;
    };

    return {
      count,
      increment
    };
  }
};
</script>

在这个例子中，我们使用 ref(0) 创建了一个响应式变量 count，它的初始值为 0。然后，我们定义了一个 increment 方法，用于增加 count 的值。最后，我们将 count 和 increment 返回，以便在模板中使用。

2. Todo List 组件

这个例子演示了 reactive()、computed() 和 watch() 的使用。

<template>
  <div>
    <input type="text" v-model="newTodo" @keyup.enter="addTodo">
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <input type="checkbox" v-model="todo.completed">
        <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
      </li>
    </ul>
    <p>未完成任务数: {{ incompleteTodosCount }}</p>
  </div>
</template>

<script>
import { reactive, computed, watch, ref } from 'vue';

export default {
  setup() {
    const newTodo = ref('');
    const todos = reactive([
      { id: 1, text: 'Learn Vue 3', completed: true },
      { id: 2, text: 'Build a Todo List', completed: false }
    ]);

    const addTodo = () => {
      if (newTodo.value.trim()) {
        todos.push({
          id: Date.now(),
          text: newTodo.value.trim(),
          completed: false
        });
        newTodo.value = '';
      }
    };

    const incompleteTodosCount = computed(() => {
      return todos.filter(todo => !todo.completed).length;
    });

    watch(
      () => todos.length,
      (newLength, oldLength) => {
        console.log(`Todos length changed from ${oldLength} to ${newLength}`);
      }
    );

    return {
      newTodo,
      todos,
      addTodo,
      incompleteTodosCount
    };
  }
};
</script>

<style scoped>
.completed {
  text-decoration: line-through;
  color: gray;
}
</style>

在这个例子中，我们使用 reactive() 创建了一个响应式数组 todos，用于存储 Todo List 的数据。然后，我们定义了一个 addTodo 方法，用于添加新的 Todo。我们还使用 computed() 创建了一个计算属性 incompleteTodosCount，用于计算未完成的任务数。最后，我们使用 watch() 监听了 todos 数组的长度变化。

3. 使用 Composition API 进行代码复用

假设我们有一个需求：需要在多个组件中获取用户的鼠标位置。我们可以使用 Composition API 来创建一个 useMousePosition 函数，然后在多个组件中复用这个函数。

// useMousePosition.js
import { ref, onMounted, onUnmounted } from 'vue';

export function useMousePosition() {
  const x = ref(0);
  const y = ref(0);

  const updatePosition = (event) => {
    x.value = event.clientX;
    y.value = event.clientY;
  };

  onMounted(() => {
    window.addEventListener('mousemove', updatePosition);
  });

  onUnmounted(() => {
    window.removeEventListener('mousemove', updatePosition);
  });

  return {
    x,
    y
  };
}

// ComponentA.vue
<template>
  <div>
    <p>Mouse position: x = {{ x }}, y = {{ y }}</p>
  </div>
</template>

<script>
import { useMousePosition } from './useMousePosition';

export default {
  setup() {
    const { x, y } = useMousePosition();

    return {
      x,
      y
    };
  }
};
</script>

// ComponentB.vue
<template>
  <div>
    <p>Mouse position: x = {{ x }}, y = {{ y }}</p>
  </div>
</template>

<script>
import { useMousePosition } from './useMousePosition';

export default {
  setup() {
    const { x, y } = useMousePosition();

    return {
      x,
      y
    };
  }
};
</script>

在这个例子中，我们创建了一个 useMousePosition 函数，它返回了鼠标的 x 和 y 坐标。然后，我们在 ComponentA 和 ComponentB 中都使用了这个函数，这样就可以在两个组件中都获取到鼠标的位置了。

Options API vs. Composition API：一个对比表

特性	Options API	Composition API
代码组织	基于选项 (data, methods, computed, watch)	基于函数
代码复用	Mixins (容易命名冲突和隐式依赖)	Composable Functions (更清晰，更易于测试)
类型推断	可能较弱，需要更多手动类型声明	更好，更准确，减少手动类型声明
可测试性	较差，需要实例化组件才能进行测试	更好，Composable Functions 可以独立进行单元测试
适用场景	小型项目，简单逻辑	大型项目，复杂逻辑

Composition API 的一些最佳实践

将相关的逻辑组织在一起： 将相关的逻辑组织在一起，形成一个独立的函数，这使得代码更容易阅读和维护。
使用清晰的命名： 使用清晰的命名，让代码更容易理解。
编写单元测试： 为你的 Composition API 函数编写单元测试，确保代码的质量。
避免过度抽象： 不要过度抽象，否则会增加代码的复杂性。

总结

Composition API 是 Vue 3 中一个非常强大的特性，它可以让你更好地组织和复用代码，提高代码的可测试性，并改善 TypeScript 的类型推断。如果你正在开发大型 Vue 项目，或者你的组件逻辑比较复杂，那么 Composition API 绝对值得你学习和使用。

当然，Composition API 并不是银弹，它并不能解决所有的问题。你需要根据你的实际情况来选择合适的 API。对于小型项目或者简单的组件，Options API 可能就足够了。但对于大型项目或者复杂的组件，Composition API 可以让你更好地控制代码，提高开发效率。

希望今天的讲解能帮助你更好地理解 Composition API。记住，编程就像烹饪，不同的食材（API）有不同的用途，只有掌握了各种食材的特性，才能做出美味佳肴（高质量的代码）。

现在，开始你的 Composition API 之旅吧！祝你编码愉快，Bug 远离你！

发表回复 取消回复

发表回复取消回复