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

在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吗?

回复
阅读 521
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文件里面不需要将代码全写在里面,可以适当的分割,这样维护性就比较高。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏