Vue3 逻辑复用 - 组合式函数

"组合式函数"(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。

一个实现实现鼠标跟踪功能

javascript 复制代码
<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>

如果我们想在多个组件中复用这个相同的逻辑
可以把这个逻辑以一个组合式函数的形式提取到外部文件中:

外部文件 mouse.js

javascript 复制代码
// 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 }
}

引入到组件:

javascript 复制代码
<script setup>
import { useMouse } from './mouse.js'

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

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

在,useMouse() 的功能可以在任何组件中轻易复用了。

相关推荐
铅笔侠_小龙虾4 分钟前
深入理解 Vue.js 原理
前端·javascript·vue.js
西西学代码8 分钟前
Flutter---showCupertinoDialog
java·前端·flutter
你的眼睛會笑10 分钟前
vue3 使用html2canvas实现网页截图并下载功能 以及问题处理
前端·javascript·vue.js
ZTLJQ21 分钟前
植物大战僵尸HTML5游戏完整实现教程
前端·游戏·html5
无光末阳37 分钟前
vue 环境下多个定时器的创建与暂停的统一封装
前端·vue.js
Hilaku40 分钟前
技术Leader的“第一性原理”:我是如何做技术决策的?
前端·javascript·面试
liyf40 分钟前
发布-订阅(Publish–Subscribe) vs 观察者模式(Observer Pattern)
前端
云中雾丽1 小时前
Flutter 里的 Riverpod 用法解析
前端
前端snow1 小时前
记录:非常典型的一个redux问题
前端
慧一居士1 小时前
src/App.vue 和 public/index.html 关系和区别
前端·vue.js