Vue3中自定义ref

文章目录

使用ref
使用customRef自定义ref

使用ref

main.js

import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')

App.vue

<template><input type="text" v-model="keyWord"><h3>{{keyWord}}</h3>
</template><script>
import {ref} from "vue";
export default {name: 'App',setup() {let keyWord = ref("hello");return {keyWord}}
}
</script>

启动应用，测试效果

使用customRef自定义ref

自定义ref，本质是一个函数。

main.js

import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')

App.vue

<template><input type="text" v-model="keyWord"><h3>{{keyWord}}</h3>
</template><script>
import {customRef} from "vue";
export default {name: 'App',setup() {//自定义ref，本质是一个函数function myRef(value){return customRef(() => {return {get(){console.log("正在读取value,当前值为:",value);return value;},set(newValue){console.log("正在修改value，新值为:",newValue);value = newValue;}}})}let keyWord = myRef("hello");return {keyWord}}
}
</script>

启动应用，测试效果

初始化没有问题，但是改变输入框中的文本值时，下面h3标签中的内容并没有同时更新。

针对以上问题，修改Demo.vue中的myRef。

<template><input type="text" v-model="keyWord"><h3>{{keyWord}}</h3>
</template><script>
import {customRef} from "vue";
export default {name: 'App',setup() {//自定义ref，本质是一个函数function myRef(value){return customRef((track,trigger) => {return {get(){console.log("正在读取value,当前值为:",value);//通知Vue追踪value的变化track();return value;},set(newValue){console.log("正在修改value，新值为:",newValue);value = newValue;//通知Vue重新解析模板trigger();}}})}let keyWord = myRef("hello");return {keyWord}}
}
</script>

customRef的回调中接收两个参数：track和trigger，它们都是函数。
调用trigger函数，通知Vue重新解析模板；调用track函数，通知Vue追踪目标数据的变化。
在setter中调用trigger，在getter中调用track，自定义ref（myRef）的功能就和ref类似了。如下图所示。

现在需求是这样的：输入框中的文本发生改变，下面h3标签中的内容延迟500ms更新。
既然已经用customRef实现了自定义ref，即myRef，延迟更新就变得很简单了：在setter中加入setTimeout延迟即可，如下。

<template><input type="text" v-model="keyWord"><h3>{{keyWord}}</h3>
</template><script>
import {customRef} from "vue";
export default {name: 'App',setup() {//自定义ref，本质是一个函数function myRef(value){return customRef((track,trigger) => {return {get(){console.log("正在读取value,当前值为:",value);track();return value;},set(newValue){console.log("正在修改value，新值为:",newValue);setTimeout(() => {value = newValue;trigger();},500)}}})}let keyWord = myRef("hello");return {keyWord}}
}
</script>

但是有一个小问题：当输入框中文本改变过快时，h4标签中内容更新时会出现抖动，见下图。

采用防抖的方式解决以上问题（当然，这是js范畴的知识点哈，并不是Vue的哈）。修改后的Demo.vue如下所示。

<template><input type="text" v-model="keyWord"><h3>{{keyWord}}</h3>
</template><script>
import {customRef} from "vue";
export default {name: 'App',setup() {//自定义ref，本质是一个函数function myRef(value,delay){return customRef((track,trigger) => {let timer;return {get(){console.log("正在读取value,当前值为:",value);track();return value;},set(newValue){console.log("正在修改value，新值为:",newValue);clearTimeout(timer);timer = setTimeout(() => {value = newValue;trigger();},delay)}}})}let keyWord = myRef("hello",500);return {keyWord}}
}
</script>

测试效果如下，ok。

Vue3中自定义ref相关推荐

vue2、vue3中自定义v-model的使用和区别
在我们的日常开发中,时常需要写一些自定义组件,而其中可能就会使用到v-model,v-model是Vue中的一个指令,用来实现数据的双向绑定,实现数据.视图更新,v-model是一个语法糖,,我们可以 ...
手把手教你在 Vue3 中自定义指令
TienChin 项目前端是 Vue3,前端有这样的一个需求:有一些前端页面上的按钮要根据用户的权限来决定是否展示出来,如果用户具备相应的权限,那么就展示对应的按钮:如果用户不具备对应的权限,那么按钮 ...
vue3中的ref 和 reactive 定义数组
在vue3中,定义响应式数据一般有两种方式:ref 和 reactive 一般来说,我们使用 ref 来定义基本数据类型,使用 reactive 来定义复杂数据类型但是也可以使用 ref 来定义数组 ...
vue3中自定义组件使用v-model
vue2 中的v-model v-model本质上是一个语法糖,如下代码 <input v-model="test"> <!--上面代码本质上就是下方代码--&g ...
vue3中的ref，toRef，toRefs三个的作用
1. ref的使用 ref 接受一个原始值,返回一个具有响应式的对象,对象有一个value属性,其值就是所传递的原始值. ref是做的一个拷贝关系,修改对象msg的值,不会影响对象obj,视图会发生变 ...
vue3.x通过ref属性获取元素
在vue2.x中,可以通过给元素添加ref='xxx'属性,然后在代码中通过this.$refs.xxx获取到对应的元素然而在vue3中时没有$refs这个东西的,因此vue3中通过ref属性获取元 ...
vue3中ref、reactive、shallowRef、 shallowReactive、toRaw、unref、toRef、toRefs、customRef使用与区别
ref ref toRef 普通ref对象特殊ref对象不会和原始对象挂钩创建的ref对象,与原始对象挂钩重新渲染不会触发渲染 -普通ref对象不会和原始对象挂钩重新渲染如下面的例子中 ...
使用customRef自定义ref，解决setup中处理异步问题。
setup中不允许使用async.await使用customRef可以让请求到的数据自动获取响应式状态详见下方demo <template><div>{{ num }}< ...
vue3中ref的理解
1.什么是ref ref和reactive一样,也是用来实现响应式数据的方法由于reactive必须传递一个对象,所以在实际开发中如果只是想让某个变量实现响应式的时候回非常麻烦所以Vue3提供了r ...

Vue3中自定义ref

文章目录

使用ref

使用customRef自定义ref

Vue3中自定义ref相关推荐

最新文章

热门文章