7. 逻辑复用

一、前言

本系列文章中,我们一直都使用的是组合式编程

落到代码上来说就是,无论什么功能,我们都是直接通过调用特定功能的函数来实现的。

而我们其实也能写出自己的组合式函数用于简化代码,比如当我们在多个组件中都需要某个功能,那就可以将其抽象出来一个函数,从而实现复用的目的。

这里以官方文档提供的一个例子为例:我们想要实现鼠标追踪的功能,也就是需要实时获取鼠标的位置坐标。

那么在代码中就可以写成下面这样:

<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文件即可,名字任意,然后将代码写进去:

image-20240122191648622

我这里的代码注释写的比较详细,不过这里还是要多说几句。

由于这里我们是一个js文件,而不是vue组件,所以想要让外面看到,你得用关键字export进行导出。

一般我们导出的都是函数,并且按照习惯,组合式函数都会以use开头。

其余的就和前面一样了,只是最后记得要将这两个响应式变量xy返回出去。

然后我们只需要导入这个js文件,就可以直接使用了:

image-20240122191905992

这里我就是在两个组件中都使用了这个组合式函数,得到当前鼠标坐标值并将其显示到组件标签内。

同时注意,此时它相当于是将前面的代码复制了两份到当前调用的位置。

这句话的意思是:虽然两个组件调用的同一个组合式函数,但其内部的变量是独立的,也就是说上图App.vue文件中的x,yHello.vue文件中的x,y,并不是同一个变量。

更多内容可以参考官方文档:组合式函数

二、自定义指令

指令我们已经用过很多了,比如v-modelv-onv-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函数,即聚焦。

作者:余识
全部文章:0
会员文章:0
总阅读量:0
c/c++pythonrustJavaScriptwindowslinux