首页 > 其他分享 >customRef

customRef

时间:2023-07-11 21:23:43浏览次数:43  
标签:return 自定义 keyword value customRef ref

  • 作用:创建一个自定义的 ref,并对其依赖项跟踪和更新触发进行显式控制。

  • 实现防抖效果:

<template>
	<input type="text" v-model="keyword">
	<h3>{{keyword}}</h3>
</template>

<script>
	import {ref,customRef} from 'vue'
	export default {
		name:'Demo',
		setup(){
			// let keyword = ref('hello') //使用Vue准备好的内置ref
			//自定义一个myRef
			function myRef(value,delay){
				let timer
				//通过customRef去实现自定义
				return customRef((track,trigger)=>{
					return{
						get(){
							track() //告诉Vue这个value值是需要被“追踪”的
							return value
						},
						set(newValue){
							clearTimeout(timer)
							timer = setTimeout(()=>{
								value = newValue
								trigger() //告诉Vue去更新界面
							},delay)
						}
					}
				})
			}
			let keyword = myRef('hello',500) //使用程序员自定义的ref
			return {
				keyword
			}
		}
	}
</script>

  

标签:return,自定义,keyword,value,customRef,ref
From: https://www.cnblogs.com/ixtao/p/17545949.html

相关文章

  • Vue3 customRef
    视频4.customRef作用:创建一个自定义的ref,并对其依赖项跟踪和更新触发进行显式控制。实现防抖效果:<template> <inputtype="text"v-model="keyword"> <h3>{{keyword}}</h3></template><script> import{ref,customRef}from'vue�......
  • [深入vue3之refs] ref、unref、toRef、toRefs、isRef、customRef、shallowRef、trigge
    ref接受一个内部值并返回一个响应式且可变的ref对象。ref对象仅有一个.valueproperty,指向该内部值。如果将对象分配为ref值,则它将被reactive函数处理为深层的......
  • vue3.0toRaw()、markRaw()、customRef()
    1.toRaw和markRaw的使用意义(给reactive对象进行的添加属性都会自动给该属性添加响应式,当需要给reactive添加没有响应式的属性则使用) 2. toRaw和markRaw的使用示例(对其......
  • Vue3之customRef
    customRef作用:创建一个自定义的ref,并对其依赖项跟踪和更新触发进行显式控制。比如在input更新数据之后,设置指定时间之后再在h3标签上重新展示最新的数据:<templ......
  • Vue3 之 ref、shallowRef、customRef
    ref把对象转化为响应式的;shallowRef是浅层响应式数据,即:只有对value整体修改,才能更新到视图层。而修改具体属性值时,不会更新视图。(shallowReactive和shallowRef一样的......
  • [踩坑记录] Vue3 customRef 传入对象没有进入set方法
    问题描述学习Vue3Ref相关API的时候,遇到了customRef这个API,它可以让我们自定义ref的更新的过程但是使用customRef有一个问题就是,如果你传入的是初始值,那么一切......