首页 /
正文
https://cn.vuejs.org/api/reactivity-advanced.html#customref
创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显式控制：
- 它需要一个工厂函数，该函数接受
track和trigger函数作为参数； - 并且应该返回一个带有
get和set的对象；
这里我们使用一个官方的案例：
- 对双向绑定的属性进行debounce(防抖)的操作；
封装useDebouncedRef的工具Hook：
import { customRef } from 'vue';
export function useDebouncedRef(value, delay = 200) {
let timeout;
return customRef((track, trigger) => {
return {
get() {
track();
return value;
},
set(newValue) {
clearTimeout(timeout);
timeout = setTimeout(() => {
value = newValue;
trigger();
}, delay);
}
}
})
}在组件界面中使用：
<template>
<div>
<input v-model="message">
<h2>{{message}}</h2>
</div>
</template>
<script>
import { useDebouncedRef } from '../hooks/useDebounceRef';
export default {
setup() {
const message = useDebouncedRef("Hello World");
return {
message
}
}
}
</script>
1
1
1
1
1
1
1
1
1
1