customRef 作用：創建一個自定義的 ref , 并對其依賴項跟蹤和更新觸發進行邏輯控制。

在原生 ref 的基礎上，添加自己的邏輯等...

在 Vue 3 中，customRef?是一個用于創建自定義響應式引用的 API。它允許開發者控制和優化響應式引用的行為，適用于特定的需求，例如創建延遲更新、合并多個變更，或是使用非標準的 getter/setter 行為。

customRef?接收一個函數，該函數返回一個對象，這個對象包含?get?和?set?函數。在?get?函數中，可以定義如何返回當前值，而在?set?函數中定義如何更新值。

基本結構：

import { customRef } from 'vue';// 使用 customRef 創建自定義引用
const myRef = customRef((track, trigger) => {let value; // 自定義值return {get() {track(); // 追蹤依賴return value; // 返回當前值},set(newValue) {value = newValue; // 設置新值trigger(); // 觸發更新},};
});

• track()：用于追蹤訪問的地方。當調用?get()?時，此函數會注冊當前的依賴關系。
• trigger()：用于在調用?set()?時通知依賴于這個引用的地方要重新渲染或執行相應的操作。

實例：封裝成 Hooks

// Person.vue<template><div class="person"><h3>{{ msg }}</h3><input type="text" v-model="msg"></div></template><script setup lang='ts' >
// import { ref } from 'vue';
import useMsgRef from '../hooks/useMsgRef'// 使用 Vue 提供的默認 ref 定義響應式數據，數據一變，頁面就更新
// const msg = ref('你好')// 使用 Vue 提供的 customRef 定義響應式數據
// 補充需求，輸入一秒后，再顯示
// 使用 useMsgRef 來定義一個響應式數據且有延遲效果
let {msg}=useMsgRef('xxx',2000)
</script>
<style scoped></style>

// useMsgRef.tsimport { customRef } from "vue";export default function (initValue:String,delay:number) {
// 使用 Vue 提供的 customRef 定義響應式數據
// 初始值
let timer:number
// track(跟蹤)，trigger(觸發)
const msg = customRef((track,trigger) => {return {// get(): msg 被讀取時被調用get() {// track() 告訴 Vue 數據 msg 很重要，你要對 msg 進行持續關注// 那么，一旦 msg 變化就去更新track() // console.log('get');return initValue},// set(): msg 被修改時被調用set(value) {// 補充需求，輸入一秒后，再顯示clearTimeout(timer)timer = setTimeout(() => {console.log('set',value);initValue = value;// trigger() 通知 Vue 數據 msg 變化了trigger()},delay)}}
})return {msg}
}

重點理解：track( ) 和 trigger( )