vue3.0 customRef

约定不等于承诺〃 2021-07-24 14:25 280阅读 0赞

(1)customRef 用于自定义返回一个ref对象,可以显式地控制依赖追踪和触发响应,接受工厂函数
    (2)两个参数分别是用于追踪的 track 与用于触发响应的 trigger，并返回一个一个带有 get 和 set 属性的对象
    
    使用:
    	import {customRef} from 'vue';
    	
    	
        function useDebouncedRef(value) {
    	      return customRef((track, trigger) => {
    	        return {
    	          get() {
    	            track()	追踪当前数据
    	            return value
    	          },
    	          set(newValue) {
    	            value=newValue
    	            trigger() 触发响应,即更新界面
    	          },
    	        }
    	      })
    	 }
    	
    	通过customRef返回的ref对象,和正常ref对象一样,通过x.value修改或读取值
    
    类型声明:
    	function customRef<T>(factory: CustomRefFactory<T>): Ref<T>
    
    	type CustomRefFactory<T> = (
    	  track: () => void,
    	  trigger: () => void
    	) => {
    	  get: () => T
    	  set: (value: T) => void
    	}

代码示例:  
自定义防抖的ref:

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)
          }
        }
      })
    }
    
    export default { 
      setup() { 
        return { 
          text: useDebouncedRef('hello')
        }
      }
    }
    
    
    <input v-model="text" />

发表评论取消回复

表情：

评论列表（有 0 条评论，280人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue3.0学习 - 第十节，customRef，如何使用ref获取元素

`customRef` 创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数，该函数接收 `track` 和 `trigger` 函数作为

电玩女神/ 2023年01月17日 15:49/ 0 赞/ 107 阅读

相关让你30分钟快速掌握vue 3

经过了漫长的迭代，Vue 3.0终于在上2020-09-18发布了，带了翻天覆地的变化，使用了Typescript 进行了大规模的重构，带来了Composition API R

我不是女神ヾ/ 2022年12月18日 11:55/ 0 赞/ 199 阅读

相关 VuePress30分钟制作一个Vue静态网站

1、vuepress新手入门课程（一） 1-1、vuepress简介与安装 [`https://www.vuepress.cn/`][https_www.vu

ゞ浴缸里的玫瑰/ 2022年09月09日 06:45/ 0 赞/ 239 阅读

相关详解 30 道 Vue 面试题(建议收藏)

点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群前言本文以前端面试官的角度出发，对 Vue 框架中一些重要的特性、框架的原理以问题的形

r囧r小猫/ 2022年09月02日 11:44/ 0 赞/ 269 阅读

相关 30个值得关注的Vue开源项目

译者按：学习优秀的开源项目是提高代码水平最有效的方式。原文: [30 Amazing Vue.js Open Source Projects for the Pas

我不是女神ヾ/ 2022年03月07日 10:14/ 0 赞/ 919 阅读

相关 30个值得关注的Vue开源项目

译者按：学习优秀的开源项目是提高代码水平最有效的方式。原文: [30 Amazing Vue.js Open Source Projects for the Pas

怼烎@/ 2022年03月07日 10:14/ 0 赞/ 295 阅读

相关 30个值得关注的Vue开源项目

译者按：学习优秀的开源项目是提高代码水平最有效的方式。原文: [30 Amazing Vue.js Open Source Projects for the Pas

太过爱你忘了你带给我的痛/ 2022年03月07日 10:14/ 0 赞/ 243 阅读

相关（30）打鸡儿教你Vue.js

Vue+Webpack 1、对es6语法有基本了解 2、了解前端工程化 3、了解vuejs 1、通过webpack搭建vue工程workflow 2、哪些是学习

朱雀/ 2021年09月29日 06:46/ 0 赞/ 191 阅读

相关 vue项目笔记（30）-vue项目接口的联调与真机测试

vue项目接口的联调与真机测试 vue项目接口的联调当前端的代码编写完毕，后端的接口也已经也编写完毕的时候，我们此时便需要进行接口联调，将模拟的数据替换为

爱被打了一巴掌/ 2021年09月16日 03:52/ 0 赞/ 370 阅读

相关 vue3.0 customRef

(1)customRef 用于自定义返回一个ref对象,可以显式地控制依赖追踪和触发响应,接受工厂函数 (2)两个参数分别是用于追踪的 track 与用于触发响

约定不等于承诺〃/ 2021年07月24日 14:25/ 0 赞/ 281 阅读