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() 的功能可以在任何组件中轻易复用了。

相关推荐
hahala2333几秒前
ESLint 提交前校验技术方案
前端
夕水23 分钟前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
Winwin25 分钟前
js基础-数据类型
javascript
Winwin25 分钟前
哈?Boolean能作为回调函数?
javascript
我麻烦大了26 分钟前
实现一个简单的Vue响应式
前端·vue.js
Shartin29 分钟前
CPT208-Human-Centric Computing: Prototype Design Optimization原型设计优化
开发语言·javascript·原型模式
独立开阀者_FwtCoder33 分钟前
你用 Cursor 写公司的代码安全吗?
前端·javascript·github
dme.41 分钟前
Javascript之DOM操作
开发语言·javascript·爬虫·python·ecmascript
Cacciatore->44 分钟前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~1 小时前
React Ref 指南:原理、实现与实践
前端·javascript·react.js