vue3组合式api

浅谈vue3组合式api：composition-api

用组件的选项 (data、computed、methods、watch) 组织逻辑在大多数情况下都有效。然而，当我们的组件变得更大时，逻辑关注点的列表也会增长。这可能会导致组件难以阅读和理解，尤其是对于那些一开始就没有编写这些组件的人来说。

一个大型组件的示例，其中逻辑关注点是按颜色分组。

这种碎片化使得理解和维护复杂组件变得困难。选项的分离掩盖了潜在的逻辑问题。此外，在处理单个逻辑关注点时，我们必须不断地“跳转”相关代码的选项块。

如果我们能够将与同一个逻辑关注点相关的代码配置在一起会更好。而这正是组合式 API 使我们能够做到的。

从获取鼠标位置的需求讲起

我们有这样一个跨组件的需求，我想在组件里获得一个响应式的变量，能实时的指向我鼠标所在的位置。

Vue 官方给出的自定义 Hook 的例子是这样的：

import { ref, onMounted, onUnmounted } from "vue";

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

  function update(e) {
    x.value = e.pageX;
    y.value = e.pageY;
  }

  onMounted(() => {
    window.addEventListener("mousemove", update);
  });

  onUnmounted(() => {
    window.removeEventListener("mousemove", update);
  });

  return { x, y };
}

在组件中使用：

import { useMousePosition } from "./mouse";

export default {
  setup() {
    const { x, y } = useMousePosition();
    // other logic...
    return { x, y };

具体业务中使用composition-api

让我们来把一个获取用户的逻辑从组件中剥离出来。
先定义一个获取用户数据的异步方法模拟获取数据

const getStore = (user) => {
  return new Promise((resolve) => {
     resolve(user)
  });
};

然后定义一个useUserStore作为处理用户信息的方法，并放入页面中。

import { ref, onMounted, watch, toRefs } from "vue";
// 定义composition-api方法
const useUserStore = function(user) {
// ref 对我们的值创建了一个响应式引用。使用引用的概念将在整个组合式 API 中经常使用。
  const userMsg = ref([]);
  const getUserStore = async () => {
    userMsg.value = await getStore(user.value);
  };

  onMounted(getUserStore);
  watch(user, getUserStore);

  return {
    userMsg,
    getUserStore,
  };
}
export default {
  props: {
    user: { type: String },
  },
  setup(props) {
    const { user } = toRefs(props);
    const { userMsg, getUserStore } = useUserStore(user);
    return { userMsg, getUserStore };
  },
};

顺便提一下useUserStore的功能远不止这么多，如果需要我们可以将一切和用户相关的信息以及处理的逻辑放入其中。既可以增加逻辑的复用，同时将用户所有相关内容统一管理，这样当你需要做出修改的时候就不需要扎进页面中去了。
当然，这也给了社区施展拳脚的空间，相信未来社区会涌现出各种各样功能丰富的api供我们使用。