064~067:尚硅谷自定义ref等相关的学习示例

src/App.vue

@@ -1,12 +1,14 @@
 <template>
   <div>
     <h1>我的App组件!</h1>
-    <Father />
+    <input type="text" v-model="msg">
+    <p>{{msg}}</p>
   </div>
 </template>
 
 <script setup lang="ts" name="App">
+import useCustomRef from './utils/useCustomRef';
+const {msg} = useCustomRef(2000,'msg');
 
-import Father from './components/01_props/Father.vue';
 
 </script>

src/utils/useCustomRef.ts

@@ -0,0 +1,24 @@
+import { customRef } from 'vue'
+
+export default function useCustomRef(interval:number,count:string){
+   
+let timer:number
+ let msg = customRef((track, trigger) => {
+  return {
+    get() {
+      track() // 追踪依赖
+      return count
+    },
+    set(newValue) {
+      clearTimeout(timer)
+      timer = setTimeout(() => {
+        count = newValue
+      trigger() // 触发依赖
+      }, interval);
+      
+    }
+  }
+})
+return {msg}
+  
+}