组合式函数

组合式函数表示的一个可以重复使用的逻辑代码

<!-- App.vue -->
<template>Mouse position is at: {{ x }}, {{ y }}</template>

<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>

在上述的代码中，获取鼠标位置的功能如果要重复使用，就可以使用一个组合式函数来存储

// 新建的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 }
}

这时候在Vue文件中使用就可以直接调用这个函数即可

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

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

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

获取DOM元素钩子函数