[TOC] ## 概述 在 Vue 应用的概念中，“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用**有状态逻辑**的函数。 可以使用vue 中的功能封装在一个函数中,如 onMountd, ref,watchEffect等 ## 示例 ### 鼠标位置 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 } } ``` 使用 ``` import { useMouse } from './mouse.js' const { x, y } = useMouse() ``` > 返回的 x,y 是相应功能是的响应式的 ### 多层嵌套 ``` import { ref } from 'vue' import { useEventListener } from './event' export function useMouse() { const x = ref(0) const y = ref(0) useEventListener(window, 'mousemove', (event) => { x.value = event.pageX y.value = event.pageY }) ``` ### 处理状态和结果 简单的连接封装 ``` export function useFetch(url) { const data = ref(null) const error = ref(null) fetch(url) .then((res) => res.json()) .then((json) => (data.value = json)) .catch((err) => (error.value = err)) return { data, error } } ``` 引用 ``` const { data, error } = useFetch('http://www.baidu.com/api') ``` **优化**:当参数变化时,自动更改返回结果,通过[`watchEffect()`](https://cn.vuejs.org/api/reactivity-core.html#watcheffect)和[`toValue()`](https://cn.vuejs.org/api/reactivity-utilities.html#tovalue)API 来重构我们现有的实现： ``` // 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 = null error.value = null fetch(toValue(url)) .then((res) => res.json()) .then((json) => (data.value = json)) .catch((err) => (error.value = err)) } watchEffect(() => { fetchData() }) return { data, error } } ``` > `toValue`,如果自动处理,ref 和函数,如果ref, 则返回ref.value, 如果是函数,则执行 > 注意 toValue(url) 是在 watchEffect 回调函数的内部调用的。这确保了在 toValue() 规范化期间访问的任何响应式依赖项都会被侦听器跟踪。