Vue3 中的各种 ref
在 Vue3 中,有许多与响应式相关的函数,例如 toRef、toRefs、isRef、unref 等等。合理地使用这些函数可以在实际开发中大大提高效率。本文将详细介绍这些函数的用法,让在实际开发中知道应该使用哪些 API 并能够熟练地回答面试官的相关问题。
ref()
大家对于 ref 这个 API 肯定都不陌生。在 Vue3 中经常会用到它。它的作用是接收一个值并返回一个响应式的对象。可以通过.value 属性来访问和修改这个值。在模板中,可以省略.value,例如在下面的代码中,当点击按钮时,页面中的 count 会响应式地更改。
<template> <div> {{ count }} <button @click="addCount">+1</button> </div> </template> <script lang="ts" setup> import { ref } from "vue"; const count = ref(1); const addCount = () => { count.value++; }; </script>
toRef
toRef 可以根据一个响应式对象中的一个属性,创建一个响应式的 ref。同时这个 ref 和原对象中的属性保持同步,改变原对象属性的值这个 ref 会跟着改变,反之改变这个 ref 的值原对象属性值也会改变,它接收两个参数,一个是响应式对应,另一个则是属性值,例如下面代码
<template> <div> {{ count.a }} {{ a }} <button @click="addCount">+1</button> </div> </template> <script lang="ts" setup> import { ref, toRef } from "vue"; const count = ref({ a: 1, b: 2, }); const a = toRef(count.value, "a"); const addCount = () => { a.value++; }; </script>
点击按钮的时候修改了 a 的值,此时 count 中的 a 也会跟着修改,当然这里的 count 也可以用 reactive
toRefs
toRefs 它可以将一个响应式对象转成普通对象,而这个普通对象的每个属性都是响应式的 ref
<template> <div> {{ count.a }} {{ countAsRefs.a }} <button @click="addCount">+1</button> </div> </template> <script lang="ts" setup> import { reactive, toRefs } from "vue"; const count = reactive({ a: 1, b: 2, }); const countAsRefs = toRefs(count); const addCount = () => { countAsRefs.a.value++; }; </script>
此时代码中的countAsRefs
类型为
{ a: Ref<number>, b: Ref<number> }
它的属性 a 和 b 都是响应式的 ref 对象,同样的它们和原对象的 count 的属性也是保持同步的
根据它的特性通常用它来解构一个响应式对象而不会让其失去响应式
import { reactive, toRefs } from "vue"; const count = reactive({ a: 1, b: 2, }); const { a, b } = toRefs(count);
此时的 a 和 b 都是一个响应式的 ref 对象,并和原对象的 a 和 b 属性保持同步
isRef()
isRef 顾名思义它是用来判断某个值是否是 ref,注意:它判断不了这个值是不是 reactive(可以使用 isReactive 判断)
import { reactive, isRef, ref } from "vue"; const count = ref(1); const testObj = reactive({ a: 1, }); console.log(isRef(count)); //true console.log(isRef(testObj)); //false
unref()
其实它是一个语法糖
val = isRef(val) ? val.value : val;
如果是 ref 则返回它的内部值,否则则返回它本身。通过这个语法糖可以看出它可以对响应式对象解除响应式引用,比如只想获取一个响应式的值,但不想要它的响应式可以使用它解除引用。 例如
<template> <div> {{ unRefAsCount }} {{ count }} <button @click="addCount">+1</button> </div> </template> <script lang="ts" setup> import { unref, ref } from "vue"; const count = ref(1); let unRefAsCount = unref(count); const addCount = () => { count.value++; }; </script>
代码中的 unRefAsCount 是不具备响应式的
shallowRef
通过翻译可以看出它是浅层的 ref,什么是浅层的 ref 呢? 与 ref 不同的是只有.value 是响应式的,再深层的属性则不具备响应式
<template> <div> {{ shallowObj.a }} <button @click="addCount">+1</button> </div> </template> <script lang="ts" setup> import { shallowRef } from "vue"; const shallowObj = shallowRef({ a: 1, }); const addCount = () => { //不会触发页面更新 shallowObj.value.a++; }; </script>
但是如果将 addCount 改为修改整个.value 就会触发响应式了
const addCount = () => { let temp = shallowObj.value.a; temp++; shallowObj.value = { a: temp, }; };
triggerRef
它可以让浅层的 ref 即 shallowRef 深层属性发生改变的时候强制触发更改,比如上面触发不了响应式的代码示例加入triggerRef
后
<template> <div> {{ shallowObj.a }} <button @click="addCount">+1</button> </div> </template> <script lang="ts" setup> import { shallowRef, triggerRef } from "vue"; const shallowObj = shallowRef({ a: 1, }); const addCount = () => { shallowObj.value.a++; //加入triggerRef强制触发更改 triggerRef(shallowObj); }; </script>
此时再看页面效果则触发了响应式
customRef
顾名思义它是自定义的 ref,可以通过 customRef 来显式的追踪某个值的响应式变化,它接收一个函数,这个函数接受 track 和 trigger 两个函数作为参数,并返回一个带有 get 和 set 方法的对象。比如下面封装一个自定义的响应式对象 myRef,同时控制它只有值小于 4 才会触发响应式
<template> <div> {{ count }} <button @click="addCount">+1</button> </div> </template> <script lang="ts" setup> import { customRef } from "vue"; const myRef = (value: number) => { const customValue = customRef((track, trigger) => { return { get() { //通知vue需要追踪后续内容的变化,这里可以自由控制 track(); return value; }, set(newValue) { console.log(newValue); //myRef.value=xxx的xxx值 //加trigger则触发响应式,通知vue更新页面,这里可以自由控制是否加trigger if (value < 4) trigger(); value = newValue; }, }; }); return customValue; }; const count = myRef(0); const addCount = () => { count.value++; }; </script>
可以看到当 count 大于 4 的时候便失去了响应式
总结
本篇文章详细介绍了 Vue3 中各种 ref 的用法,其中包括
- ref(): 接收一个值并返回一个响应式的对象,可以使用.value 属性来访问和修改这个值。
- toRef(obj, key): 根据一个响应式对象中的一个属性,创建一个响应式的 ref,并且该 ref 和原对象中的属性保持同步。 -toRefs(obj): 将一个响应式对象转换成一个普通对象,其中普通对象的每个属性都是响应式的 ref。
- isRef(value): 判断某个值是否是 ref 对象。
- unref(value): 用于解除响应式引用
- shallowRef(value): 创建一个浅层的 ref,只有 value 属性是响应式的,深层的属性不具备响应式。
- triggerRef(ref): 强制浅层的 ref 发生改变时触发响应式。
- customRef(factory): 自定义 ref 对象,可以显式地追踪某个值的响应式变化。
部分内容来源网络,如有侵犯到您的权益请联系leeke98@foxmail.com进行下架处理
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!