[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() 規范化期間訪問的任何響應式依賴項都會被偵聽器跟蹤。