前言
当我们开发大型项目的时候，为了更好的复用代码，往往会声明很多的组件，以此来解决模板及逻辑代码的冗余。但有些时候，我们只想进行逻辑代码的复用。比如说我们会把时间格式化的代码抽离成一个函数，传入时间，就会返回相应的时间格式。
而对于这种逻辑，我们可以叫它无状态的逻辑。接受相应格式的值，返回我们预期的结果。像这种封装无状态逻辑的库有很多，比如广为人知的lodash就是。
尽管以上两种封装方法，可以解决我们开发中很多的代码复用问题。但是我们如果想要封装带有生命周期的逻辑时（也就是有状态的逻辑，会随着时间而变化状态），却是力不从心的。当然，Mixin可以做到，不过他很难以维护的问题却让人诟病。
为此，在vue3中推出了组合式函数来帮助我们复用有状态的逻辑。而这一亮点功能，也正是vue3的灵魂所在。
组合式函数
“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。
下面，我们来通过一个简单的小例子（跟踪鼠标在当前页面的位置）来看一看组合式函数的奥秘。
我们先看在组件中使用组合式api是如何实现的：
<script setup> import { ref, onMounted, onUnmounted } from 'vue' const x = ref(0) const y = ref(0) function change(event) { x.value = event.pageX y.value = event.pageY } onMounted(() => window.addEventListener('mousemove', change)) onUnmounted(() => window.removeEventListener('mousemove', change)) </script> <template>当前鼠标的位置： {{ x }}, {{ y }}</template> 复制代码
像上面的代码，我们如果想进行复用的话，就可以通过组合式函数的方式来进行封装为一个js的文件。
// mouse.js import { ref, onMounted, onUnmounted } from 'vue' // 组合式函数名约定以“use”开头 export function useMouse() { // 组合式函数封装管理的状态 const x = ref(0) const y = ref(0) // 通过组合式函数可以随时更改其状态。 function change(event) { x.value = event.pageX y.value = event.pageY } // 组合式函数的有点就在于可以使用生命周期进行挂载 onMounted(() => window.addEventListener('mousemove', change)) onUnmounted(() => window.removeEventListener('mousemove', change)) // 返回封装管理的状态 return { x, y } } 复制代码
然后，我们在组件中进行使用：
<script setup> import { useMouse } from './mouse.js' const { x, y } = useMouse() </script> <template>当前鼠标的位置： {{ x }}, {{ y }}</template> 复制代码
看过上面的代码，相信你也大概了组合式函数的妙用了吧。他很好的抽离有逻辑状态的代码，并能让所有组件进行复用。而且和在组件中一样，你可以使用所有的组合api，做到很好的替代组件中的逻辑业务部分。
