Vue组合式函数之方法复用

1. 可以复用的JS逻辑
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 }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

组件调用

<template>
  Mouse position is at: {{ x }}, {{ y }}
</template>
<script setup>
import { useMouse } from './js/mouse.js'

const { x, y } = useMouse()
</script>
<style scoped>
</style>
1
2
3
4
5
6
7
8
9
10