vue3【详解】组合式函数

什么是组合式函数？

利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数，用于实现逻辑复用，类似 react18 中的 hook

• 函数名称 – 以 use 开头，采用驼峰命名，如 useTitle
• 参数 – 建议使用 toValue() 处理（以便支持 ref、getter 或普通值的参数）
• 返回值 – 建议使用一个包含多个 ref 的普通的非响应式对象（以便解构为 ref 之后仍可以保持响应性）

相关的工具库 VueUse

组合式函数 vs 公共函数 的区别

• 公共函数封装无状态的逻辑：传入参数后立刻返回期望的返回值，如日期格式化函数，将指定日期对象格式化为 2024年7月20日23:12:53
• 组合式函数封装有状态逻辑，可管理会随时间而变化的状态，如将鼠标的坐标声明为响应式变量，要想在移动鼠标过程中，实时更新鼠标坐标的响应式变量并触发页面渲染，则需要使用组合式函数。

响应式的组合式函数

需求：随传入的 URL 变化，访问接口数据
要点：通过侦听器跟踪 URL 的变化

// fetch.js
import { ref, watchEffect, toValue } from 'vue'export function useFetch(url) {const data = ref(null)const error = ref(null)const fetchData = () => {// reset state before fetching..data.value = nullerror.value = nullfetch(toValue(url)).then((res) => res.json()).then((json) => (data.value = json)).catch((err) => (error.value = err))}watchEffect(() => {fetchData()})return { data, error }
}

实战范例

• useEventListener

  封装添加和清除 DOM 事件监听器的逻辑

  import { onMounted, onUnmounted } from 'vue'export function useEventListener(target, event, callback) {onMounted(() => target.addEventListener(event, callback))onUnmounted(() => target.removeEventListener(event, callback))
  }
  

  使用范例

    useEventListener(window, 'mousemove', (event) => {x.value = event.pageXy.value = event.pageY})
  

• useTitle
  https://sunshinehu.blog.csdn.net/article/details/139838689

• useLocation
  https://sunshinehu.blog.csdn.net/article/details/139486731

• useMousePosition
  https://blog.csdn.net/weixin_41192489/article/details/137875217