Vue函数式编程终极指南：像写诗一样写代码

引言：当Vue遇上函数式，优雅永不过时

你是否见过这样的代码？组件间状态乱飞、副作用神出鬼没、单元测试如走钢丝……函数式编程就像代码界的“断舍离大师”，教你用纯函数、不可变数据和高阶魔法，让Vue代码变得干净、稳定且充满艺术感！

本文不仅会揭秘函数式编程的核心心法，还会手把手教你：
✅ 如何用Composition API实现函数式优雅
✅ 高阶函数与柯里化的实战妙用
✅ Vue 3函数式组件性能优化秘籍
✅ 配套工具链与设计模式大全

---

第一章：函数式编程核心三要素

1.1 纯函数：代码界的“数学公式”

定义：输入相同，输出永远相同，且无副作用（就像榨汁机，放苹果必出苹果汁）。
反面教材：

let count = 0;  
const impureAdd = (a, b) => {  
  count++; // 偷偷修改外部变量！  
  return a + b;  
};  

纯函数示范：

const pureAdd = (a, b) => a + b;  

Vue中的典型应用：

• computed属性
• 自定义Hook函数

1.2 不可变性：数据界的“琥珀化石”

核心理念：数据一旦创建永不修改，只能生成新版本。
Vue实现方案：

import { reactive, readonly } from "vue";  
const origin = reactive({ score: 90 });  
// 生成只读副本，修改会触发警告！  
const protectedCopy = readonly(origin);  

1.3 高阶函数：函数的“乐高积木”

定义：可接收函数为参数，或返回函数的函数。
Vue场景：

• map/filter处理列表
• 自定义Hook工厂函数

// 高阶Hook示例：计数器工厂  
function useCounter(initialValue) {  
  const count = ref(initialValue);  
  const increment = () => count.value++;  
  return { count, increment };  
}  

---

第二章：Vue 3函数式实践四重奏

2.1 计算属性：响应式的纯函数

典型场景：过滤列表、数据格式化

优势：

• 自动依赖追踪
• 缓存优化（依赖不变不重复计算）

2.2 Hook函数：逻辑复用的灵魂

步骤：

1. 将业务逻辑封装成Hook
2. 在组件中按需组合

// useFetch.js  
import { ref } from "vue";  
export default function useFetch(url) {  
  const data = ref(null);  
  const fetchData = async () => {  
    data.value = await fetch(url).then(res => res.json());  
  };  
  return { data, fetchData };  
}  

组件调用：

2.3 函数式组件：渲染性能的涡轮增压

Vue 3新写法（告别