# 1. customRef
App 为根组件 下面 Home 例子都被此组件引用
vue | // App.vue |
| <template> |
| <div> |
| <home></home> |
| </div> |
| </template> |
| |
| <script> |
| import Home from "./Home.vue"; |
| |
| export default { |
| components: { |
| Home, |
| }, |
| }; |
| </script> |
| |
| <style scoped> |
| </style> |
- 创建一个自定义的 ref, 并对齐依赖项跟踪和更新触发进行显示控制:
- 它需要一个工厂函数,该函数接受 track 和 trigger 函数作为参数;
- 并且应该返回一个带有 get 和 set 的对象
js | import { customRef } from "vue"; |
| |
| export default function (value, delay) { |
| let timer = null; |
| |
| return customRef((track, trigger) => { |
| return { |
| get() { |
| track(); |
| return value; |
| }, |
| set(newValue) { |
| clearTimeout(timer); |
| timer = setTimeout(() => { |
| value = newValue; |
| trigger(); |
| },delay) |
| } |
| } |
| }) |
| } |
vue | // Home.vue |
| <template> |
| <div> |
| <input v-model="info" /> |
| <h2>{{ info }}</h2> |
| </div> |
| </template> |
| |
| <script> |
| import debounceRef from "./hook/debounceRef"; |
| |
| export default { |
| setup() { |
| const info = debounceRef("Hello World", 1000); |
| |
| return { |
| info, |
| }; |
| }, |
| }; |
| </script> |
| |
| <style scoped> |
| </style> |
参考结果:延迟 1s 触发响应式~