Vue3 的函数式编程

Vue3.0 正式版已经于9月底发布，其中，Vue3 新增的composition-api 是我们讨论的大热门，甚至不少 react 开发者都对其赞不绝口。那么，究竟什么是 函数式编程 ？composition-api 又厉害在哪里捏？

注：看本文章之前，你需要了解一下 Vue3 的 composition-api

动机

逻辑的组合与复用。

组件 API 设计所面对的核心问题之一就是如何组织逻辑，以及如何在多个组件之间抽取和复用逻辑。

在此之前，Vue2.x 的 Mixins 以及 react 的高阶组件等模式都可以实现逻辑的组合与复用，但它们都存在数据来源不清晰、命名空间冲突以及性能的问题。写到这里，要向 react 致敬，因为 React Hooks 的出现是革命性的，而 Vue3 的 composition-api 提供的全新的逻辑复用方案也是受到了 React Hooks 的启发。

我们来观察一下尤雨溪给出来的“用组合函数来封装鼠标位置侦听逻辑”例子：

function useMouse() {
  const x = ref(0)
  const y = ref(0)
  const update = e => {
    x.value = e.pageX
    y.value = e.pageY
  }
  onMounted(() => {
    window.addEventListener('mousemove', update)
  })
  onUnmounted(() => {
    window.removeEventListener('mousemove', update)
  })
  return { x, y }
}

// 在组件中使用该函数
const Component = {
  setup() {
    const { x, y } = useMouse()
    // 与其它函数配合使用
    const { z } = useOtherLogic()
    return { x, y, z }
  },
  template: `<div>{{ x }} {{ y }} {{ z }}</div>`
}

从例子中可以看到 composition-api ：

• 暴露给模版的属性来源清晰（从函数返回）；
• 返回值可以被任意重命名，所以不存在命名空间冲突；
• 没有创建额外的组件实例所带来的性能损耗。

演示

让我们结束枯燥的解释，来感受一下 使用函数式编程的Vue3 与 使用模板语法的Vue2 究竟能有哪些区别。我们从一个简单的 todolist 的例子来对比一下

首先我们使用 Vue2 的模板语法来实现：

<template>
  <div class="home">
    <form>
      <input type="text" v-model="stu.id" />
      <input type="text" v-model="stu.name" />
      <input type="text" v-model="stu.age" />
      <button type="submit" @click="handleAdd">添加</button>
    </form>
    <ul>
      <li v-for="(item, index) in students" :key="item.id">
        {{ item.name }}，{{ item.age }}岁，
        <button @click="handleDelete(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      students: [
        { id: 1, name: "张三", age: 10 },
        { id: 2, name: "李四", age: 11 },
        { id: 3, name: "王五", age: 12 },
      ],
      stu: {},
    };
  },
  methods: {
    handleDelete(i) {
      this.students = this.students.filter((item, index) => index != i);
    },
    handleAdd(e) {
      e.preventDefault();
      this.students.push(this.stu);
      this.stu = {};
    },
  },
};
</script>

以上代码使用 Vue2 的模板语法实现了 todolist 的简单的新增和删除功能。

现在我们使用 Vue3 重写一下：

<template>
  <form>
    <input type="text" v-model="state.stu.id" />
    <input type="text" v-model="state.stu.name" />
    <input type="text" v-model="state.stu.age" />
    <button type="submit" @click="handleAdd">添加</button>
  </form>
  <ul>
    <li v-for="(item, index) in state.students" :key="item.id">
      {{ item.name }}，{{ item.age }}岁，
      <button @click="handleDelete(index)">删除</button>
    </li>
  </ul>
</template>

<script>
import { reactive } from "vue";
export default {
  setup() {
    // 创建响应式初始数据
    let state = reactive({
      students: [
        { id: 1, name: "张三", age: 10 },
        { id: 2, name: "李四", age: 11 },
        { id: 3, name: "王五", age: 12 },
      ],
      stu: {},
    });

    // 删除方法
    function handleDelete(i) {
      state.students = state.students.filter((item, index) => index != i);
    }

    // 添加方法
    function handleAdd(e) {
      e.preventDefault();
      state.students.push(state.stu);
      state.stu = {};
    }

    // 将数据和方法返回，暴露给模板使用
    return {
      state,
      handleDelete,
      handleAdd,
    };
  },
};
</script>

我们来观察以下 Vue3 的代码，发现我们定义的所有数据和逻辑都放在了 setup 函数里 —— 这难道不是使代码的可读性更差了吗？

当然不是，composition-api 又叫 “组合api” ，我们来看一下当把它逻辑组合之后，我们的 js 代码是什么样子：

<script>
import { reactive } from "vue";
export default {
  setup() {
    // 使用抽离后的移除逻辑
    let { state, handleDelete } = useRemoveStudent();
    // 使用抽离后的新增逻辑
    let { handleAdd } = useAddStudent(state);

    // 将数据和方法返回，暴露给模板使用
    return {
      state,
      handleDelete,
      handleAdd,
    };
  },
};
// 移除功能的逻辑-----------------------------
function useRemoveStudent() {
  // 创建响应式初始数据
  let state = reactive({
    students: [
      { id: 1, name: "张三", age: 10 },
      { id: 2, name: "李四", age: 11 },
      { id: 3, name: "王五", age: 12 },
    ],
    stu: {},
  });

  // 删除方法
  function handleDelete(i) {
    state.students = state.students.filter((item, index) => index != i);
  }

  return {
    state,
    handleDelete,
  };
}

// 新增功能的逻辑------------------------------
function useAddStudent(state) {
  // 添加方法
  function handleAdd(e) {
    e.preventDefault();
    state.students.push(state.stu);
    state.stu = {};
  }
  return {
    handleAdd,
  };
}
</script>

我们主要观察一下 setup 函数，会发现它居然是如此的优雅！所有单独的功能模块全部都独立开来，最后在 setup 函数中统一暴露给模板使用。我们甚至可以把组合后的逻辑放在单独的js文件中，这样会使我们的代码逻辑更直观，可维护性更高，复用性更强，就像我们文章开头所说的那样。

让我们再直观地看一眼 composition-api 的好处：

太优雅了。