customRef

作用：可以自定义ref

ref是自动为其下数据添加响应式，而customRef就是手动为其下数据添加响应式

<template>
	<input type="text" v-model="keyword">
	<h3>{{keyword}}</h3>
</template>
<script lang="ts" setup>
	import { customRef, ref } from 'vue'

	function myref(value) {
		let timer
		return customerRef((track, trigger) => {
			return {
				get() {	
					console.log(`从myref容器中读取数据，把初始化数据${value}给他`)
					// template中，h3里面的keyword是从get中读取的，当set已经将keyword的值修改了，但是h3里面的keyword一直不更新，是因为此处return的value是调用myref时传的初始化实参hello，所以页面不会更新
					// 所以要先在get里面调用customRef的track方法去追踪。再在set里面设置修改 value = newValue，然后还要调用customRef里面的trigger方法去通知页面更新
					track()
					return value
				},
				set(newValue) {
					console.log(`将myref容器中的数据修改，修改成：${value}`)	
					// 定时器是异步的，如果不清除定时器，会有bug，每次执行修改数据时，会卡顿，所以要清除定时器
					clearTimeout(timer)
					timer = setTimeout(() => {
						value = newvalue
						trigger()	// 通知vue去重新解析模板
					})
					
				}
			}
		})
	}
	let keyword = myref('hello')	// 使用自定义的ref
</script>