Vue组合式函数(一)

107 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第16天,点击查看活动详情

前言

当我们开发大型项目的时候,为了更好的复用代码,往往会声明很多的组件,以此来解决模板及逻辑代码的冗余。但有些时候,我们只想进行逻辑代码的复用。比如说我们会把时间格式化的代码抽离成一个函数,传入时间,就会返回相应的时间格式。

而对于这种逻辑,我们可以叫它无状态的逻辑。接受相应格式的值,返回我们预期的结果。像这种封装无状态逻辑的库有很多,比如广为人知的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,做到很好的替代组件中的逻辑业务部分。