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

作者站长头像
站长
· 阅读数 16
在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吗?

回复
1个回答
avatar
test
2024-07-11
// mouse.jsimport { 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文件里面不需要将代码全写在里面,可以适当的分割,这样维护性就比较高。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容