组合式函数，这里有`状态逻辑`的函数是指的`useMouse`吗？

Question

在Vue应用的概念中，"组合式函数"是一个利用Vue组合式API来封装和复用的有状态逻辑的函数。

示例：

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

请问下，
1.这个示例中哪里有使用到Vue组合式API？
2.这里有状态逻辑的函数是指的useMouse吗？

Answer 1

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

上面的ref、onMounted... from vue都属于Vue组合式API。

问：有状态逻辑的函数是指的useMouse吗？
答：是的，怎么理解有状态y逻辑函数呢？
例子：

const add = (x, y) => x + y
add(1,2) // 3
add(2,5) // 7

上面就很明显是没状态的，调用一次就返回一次结果，属于纯函数

// mouse.js
import { ref } from 'vue'

// 按照惯例，组合式函数名以“use”开头
export function useCount() {
  // 被组合式函数封装和管理的状态
  const x = ref(0)

  function count(valx) {
    x.value = valx
  }
  return { x, count }
}

import { useMouse } from './mouse.js'

const { x, count } = useCount()
count(1)    //x = 1
count(12)    //x = 13

这个就属于有状态的，并且这个数是响应式的，所有我们在vue文件里面不需要将代码全写在里面，可以适当的分割，这样维护性就比较高。