对话学编程：理解Vue Composition API

神经蛙2705
215 阅读4分钟

Q : 作为一名vue2开发者，觉得Vue Composition API特别难以理解，请帮我用通俗易懂的语言解释一下原因和Vue Composition API Vue Composition API 与 React Hooks 对比分析

一、为什么 Vue2 开发者会觉得 Composition API 难理解？

作为 Vue2 开发者，你可能习惯了 Options API 的代码组织方式（如 data、methods、computed 等选项分门别类）。而 Composition API 的核心是 函数式编程 和 逻辑聚合，这会导致以下认知差异：

  1. 代码组织方式的颠覆
    • Options API：像 分抽屉存放物品（数据放 data，方法放 methods），简单直观但逻辑分散。例如，一个“用户登录”功能可能分散在 data（用户信息）、methods（登录方法）、computed（登录状态）等多个选项中。

    • Composition API：像 按功能整理到盒子里，所有相关代码（状态、方法、副作用）集中在一个函数中。比如“用户登录”的所有逻辑可以封装在 useLogin() 函数里，直接引入复用。

  2. 响应式数据的新写法
    • Vue2 中直接通过 this.xxx 访问数据，而 Composition API 需要通过 ref 或 reactive 创建响应式变量，并通过 .value 操作基础类型数据（如数字、字符串）。例如：

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

// Composition API
const count = ref(0);
const increment = () => { count.value++ };

    这种显式的 .value 操作容易让人困惑。

  3. 生命周期钩子的调用方式
    • Vue2 中直接在选项里写 mounted() { ... }，而 Composition API 需要通过函数调用（如 onMounted()）并在 setup() 中注册：

    import { onMounted } from 'vue';
setup() {
  onMounted(() => { console.log('组件加载完毕') });
}

    这种函数式调用需要适应。

二、Composition API 的通俗解释

你可以把 Composition API 理解成 “乐高积木式编程”：

  1. 核心工具：setup() 函数
    这是所有逻辑的入口，相当于一个组装车间。在这里，你可以：
    • 用 ref(0) 创建响应式数据（像拼装积木的零件）

    • 用 computed(() => count.value * 2) 定义计算属性（像组合零件成小模块）

    • 用 watch(count, (newVal) => { ... }) 监听数据变化（像给积木加传感器）

    • 最后将需要的零件和模块 “暴露” 给模板使用（return { count }）。

  2. 为什么需要它？
    • 解决逻辑分散：比如一个“购物车”功能，在 Vue2 中可能分散在 data（商品列表）、methods（添加商品）、computed（总价计算）等多个地方；而 Composition API 可以把这些全部写在一个 useCart() 函数里，清晰集中。

    • 更好的复用性：类似 Vue2 的 mixins，但避免了命名冲突和来源不明确的问题。比如你可以把“网络请求”逻辑封装成 useFetch()，多个组件直接复用。

  3. 类比生活场景
    想象你做饭：
    • Options API 就像把食材、调料、厨具分别放在不同柜子里，每次做菜要来回跑动取用。

    • Composition API 就像把“做番茄炒蛋”需要的所有东西（番茄、鸡蛋、锅铲）集中放在一个料理台上，随手就能拿到。

三、如何快速上手？

  1. 从简单功能开始
    先尝试改写 Vue2 中 单个功能 的代码（比如计数器），感受逻辑聚合的效果。

  2. 掌握两个核心函数
    • ref：处理基本类型数据（数字、字符串等），通过 .value 读写。

    • reactive：处理对象或数组，直接修改属性即可（无需 .value）。

    const num = ref(0);      // num.value++
const user = reactive({ name: '张三' }); // user.name = '李四'

  3. 组合函数（Composables）
    将重复逻辑封装成自定义函数，例如：

    // useCounter.js
export function useCounter(initialValue) {
  const count = ref(initialValue);
  const increment = () => count.value++;
  return { count, increment };
}

// 组件中复用
import { useCounter } from './useCounter';
setup() {
  const { count, increment } = useCounter(0);
  return { count, increment };
}

    这种模式比 Vue2 的 mixins 更灵活。

四、总结

Composition API 的设计初衷是让复杂组件更易维护，尤其适合大型项目。它的学习曲线确实较陡，但一旦掌握，你会发现：
• 代码像 搭积木一样自由组合

• TypeScript 支持更好（类型提示更明确）

• 逻辑复用成本大幅降低（告别 mixins 的混乱）

如果你是 Vue2 开发者，建议先从Vue 官方文档的示例入手，逐步过渡到真实项目中的复杂场景。

avatar
文章
阅读
粉丝