什么是组合式函数？
利用 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
