一、前言
本系列文章中，我们一直都使用的是组合式编程。
落到代码上来说就是，无论什么功能，我们都是直接通过调用特定功能的函数来实现的。
而我们其实也能写出自己的组合式函数用于简化代码，比如当我们在多个组件中都需要某个功能，那就可以将其抽象出来一个函数，从而实现复用的目的。
这里以官方文档提供的一个例子为例：我们想要实现鼠标追踪的功能，也就是需要实时获取鼠标的位置坐标。
那么在代码中就可以写成下面这样：
<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
const x = ref(0)
const y = ref(0)
function update(event) {
x.value = event.pageX
y.value = event.pageY
}
onMounted(() => window.addEventListener('mousemove', update))
onUnmounted(() => window.removeEventListener('mousemove', update))
</script>
<template>
Mouse position is at: {{ x }}, {{ y }}
</template>
逻辑并不复杂，就是在组件挂载的时候(onMounted)给window对象添加一个鼠标移动的回调函数，并在组件卸载的时候将其移除掉（onUnmounted）。
这个回调函数也仅仅是得到当前鼠标的坐标，并将其存放在x、y这两个响应式变量上，然后就会同步显示到页面上了。
但这仅仅是在一个组件中，如果我想在多个组件中都跟踪鼠标功能的话，岂不是要将这段代码写多次了？
在这种情况下，我们就可以考虑将其封装为一个组合式的函数。
用法并不难，直接在项目中创建一个js文件即可，名字任意，然后将代码写进去：
我这里的代码注释写的比较详细，不过这里还是要多说几句。
由于这里我们是一个js文件，而不是vue组件，所以想要让外面看到，你得用关键字export进行导出。
一般我们导出的都是函数，并且按照习惯，组合式函数都会以use开头。
其余的就和前面一样了，只是最后记得要将这两个响应式变量x、y返回出去。
然后我们只需要导入这个js文件，就可以直接使用了：
这里我就是在两个组件中都使用了这个组合式函数，得到当前鼠标坐标值并将其显示到组件标签内。
同时注意，此时它相当于是将前面的代码复制了两份到当前调用的位置。
这句话的意思是：虽然两个组件调用的同一个组合式函数，但其内部的变量是独立的，也就是说上图App.vue文件中的x,y与Hello.vue文件中的x,y，并不是同一个变量。
更多内容可以参考官方文档：组合式函数。
二、自定义指令
指令我们已经用过很多了，比如v-model、v-on、v-slot等等。
这些都是官方提供的，但官方同样提供了让我们自定义指令的方法。
其目的在于让我们可以重复使用普通元素的底层DOM访问逻辑。
比如官方文档给出的一个示例：
<script setup>
// 在模板中启用 v-focus
const vFocus = {
mounted: (el) => el.focus()
}
</script>
<template>
<input v-focus />
</template>
使用方式很简单，直接在任意一个普通标签中，写上一个以v-开头的属性，比如这里写的是v-focus。
然后我们再在下面的代码中定义一个叫做vFocus的对象(以v字母开头，同时将后面的名字首字母大写，并去除中间的-)。
这个对象中我们就可以做一些事情，比如这里写的是挂载(mounted)属性，让其等于一个函数。
这个函数有一个参数，就是前面写上这个自定义指令的标签对象。然后调用了这个对象上的focus函数，即聚焦。
