You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
44 lines
1019 B
44 lines
1019 B
<template> |
|
<input type="text" v-model="keyWord"> |
|
<h3>{{keyWord}}</h3> |
|
</template> |
|
|
|
<script> |
|
import {ref, customRef} from "vue"; |
|
|
|
export default { |
|
name: 'App', |
|
setup() { |
|
// 自定义ref |
|
function myRef(value) { |
|
let timer |
|
// console.log('---myRef---', value) |
|
return customRef((track,trigger)=>{ |
|
return { |
|
get() { |
|
console.log(`有人从myRef这个容器中读取数据了，我把${value}给他了`) |
|
track() // 通知vue追踪数据变化 |
|
return value |
|
}, |
|
set(newValue) { |
|
console.log(`有人从myRef这个容器中数据改为了：${newValue}`) |
|
clearTimeout(timer) |
|
timer = setTimeout(()=>{ |
|
value = newValue |
|
trigger() //通知vue去重新解析模板 |
|
}, 500) |
|
} |
|
} |
|
}) |
|
} |
|
|
|
// let keyWord = ref('hello') // 使用默认的ref |
|
let keyWord = myRef('hello') |
|
|
|
return { |
|
keyWord, |
|
} |
|
} |
|
|
|
} |
|
</script>
|
|
|