Vue3的customRef

customRef可以自定义ref，可实现防抖

<template>
	<input v-model="keywords">
	<p>{{keywords}}p>
template>

<script>
import { customRef } from 'vue';
export default {
	setup() {
		function cusRef(value) {
			return customRef((track, trigger) => {
				let timer = null;
				return {
					get() {
						track(); // 追踪，提前告诉get方法之后要修改数据
						return value;
					},
					set(newValue) {
						clearTimeout(timer);
						timer = setTimeout(() => {
							value = newValue;
							trigger();
						}, 1000);
					}
				}
			});
		}
		let keywords = cusRef('hello world'); 
		return {
			keywords
		};
	}
}
</script>