vue3：详解组合式函数

概念

利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。

作用

复用公共任务的逻辑。推荐在纯逻辑复用时使用组合式函数，在需要同时复用逻辑和视图布局时使用无渲染组件。

和普通函数的区别

一般普通函数我们在封装函数的时候，都是封装无状态的逻辑，比如日期转换函数，输入一个固定的值也会输出一个固定值。

但是有时候需要封装一些有状态的逻辑（随着时间变化而变化），比如跟踪当前鼠标在页面中的位置。可以使用 vue3 的响应式 API（ref、reactive）以及生命周期函数等等。

类似自定义 React hooks。

示例

跟踪当前鼠标在页面中的位置

// mouse.js
import { ref, onMounted, onUnmounted } from 'vue'

// 按照惯例，组合式函数名以“use”开头
export function useMouse() {
  // 被组合式函数封装和管理的状态
  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))

  // 通过返回值暴露所管理的状态
  return { x, y }
}

使用

<script setup>
import { useMouse } from './mouse.js'

const { x, y } = useMouse()
</script>

<template>Mouse position is at: {{ x }}, {{ y }}</template>

最后

推荐组合式函数库 vueuse