【Vue3】自定义ref(customRef)的用法和示例(转)
Vue3 用法 自定义 示例 ref
2023-09-11 14:14:57 时间
<template>
<div>
<input type="text" v-model="keyword" />
<h3>{{ keyword }}</h3>
</div>
</template>
<script>
import { ref, reactive, toRaw, customRef } from "vue";
export default {
setup() {
//自定义函数内部实现
function myref(value) {
let timer;
return customRef((track, trigger) => {
return {
get() {
// 读属性调用get
console.log("从myref中读取数据我把${value}");
track(); //通知vue追踪数据的变化
return value;
},
set(newvalue) {
//修改数据低啊用set
console.log(`修改了数据${newvalue}`);
value = newvalue; //进行修改数据
clearTimeout(timer); //进行防抖
timer = setTimeout(() => {
trigger(); //通知vue重新解析模板
}, 1000);
},
};
});
}
let keyword = myref("hellow"); //使用程序员自定义ref
return { keyword };
},
};
</script>
本文转自:
相关文章
- 【Vue3】源码解析
- 【Vue3】Vue3中计算属性computed的用法示例(图文+代码)
- 【Vue3】Vue3基于setup的数据和事件调用实例[ref和reactive](图文+完整代码)
- 【Vue】Vue2和vue3路由的安装及页面切换简单示例(图文+完整源代码)
- Vue3.x使用Echarts绘制世界地图并进行定点
- vue3使用element-plus的el-table组件报错关键字‘emitsOptions‘和‘insertBefore
- vue3组合式api 和 react自定义hooks
- vue3+ElementPlus 后台布局搭建
- VUE3实用组件开发合集三:进度条组件
- Vue3+Vite+Element-Plus实现CRUD常见表单项目
- Vue3实现组件级基类的几种方法
- Vue3实践指南:使用reactive函数声明数组如何正确赋值响应式、script setup语法糖中toRefs如何优雅呈现、Options API 与 Composition API 如何选择及混用是否对性能有影响、关于 setup 中没有 this 的问题及 setup 的执行时机
- vue3中ref和reactive的区别(系列六)
- vue3中reactive注意点(系列四)
- Vue3 CSS渲染
- Vue3:有关v-model的用法