在 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 对象,可以显式地追踪某个值的响应式变化。

如果本篇文章对你有所帮助的话那就点个赞吧~

搞懂 Vue3 中的各种 ref:toRef,toRefs,isRef,unref...的更多相关文章

  1. 轻松搞懂Java中的自旋锁

    前言 在之前的文章<一文彻底搞懂面试中常问的各种“锁”>中介绍了Java中的各种“锁”,可能对于不是很了解这些概念的同学来说会觉得有点绕,所以我决定拆分出来,逐步详细的介绍一下这些锁的来龙 ...

  2. 来一轮带注释的demo,彻底搞懂javascript中的replace函数

    javascript这门语言一直就像一位带着面纱的美女,总是看不清,摸不透,一直专注服务器端,也从来没有特别重视过,直到最近几年,javascript越来越重要,越来越通用.最近和前端走的比较近,借此 ...

  3. 帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)

    作为一名前端工程师,必须搞懂JS中的prototype.__proto__与constructor属性,相信很多初学者对这些属性存在许多困惑,容易把它们混淆,本文旨在帮助大家理清它们之间的关系并彻底搞 ...

  4. 让你彻底搞懂JS中复杂运算符==

    让你彻底搞懂JS中复杂运算符== 大家知道,==是JavaScript中比较复杂的一个运算符.它的运算规则奇怪,容易让人犯错,从而成为JavaScript中“最糟糕的特性”之一. 在仔细阅读了ECMA ...

  5. 彻底搞懂 JS 中 this 机制

    彻底搞懂 JS 中 this 机制 摘要:本文属于原创,欢迎转载,转载请保留出处:https://github.com/jasonGeng88/blog 目录 this 是什么 this 的四种绑定规 ...

  6. 一文搞懂 js 中的各种 for 循环的不同之处

    一文搞懂 js 中的各种 for 循环的不同之处 See the Pen for...in vs for...of by xgqfrms (@xgqfrms) on CodePen. for &quo ...

  7. 彻底搞懂JavaScript中的继承

    你应该知道,JavaScript是一门基于原型链的语言,而我们今天的主题 -- "继承"就和"原型链"这一概念息息相关.甚至可以说,所谓的"原型链&q ...

  8. 一文彻底搞懂Java中的环境变量

    一文搞懂Java环境变量 记得刚接触Java,第一件事就是配环境变量,作为一个初学者,只知道环境变量怎样配,在加上各种IDE使我们能方便的开发,而忽略了其本质的东西,只知其然不知其所以然,随着不断的深 ...

  9. 一文带你搞懂java中的变量的定义是什么意思

    前言 在之前的文章中,壹哥给大家讲解了Java的第一个案例HelloWorld,并详细给大家介绍了Java的标识符,而且现在我们也已经知道该使用什么样的工具进行Java开发.那么接下来,壹哥会集中精力 ...

  10. 大白话讲解Promise(三)搞懂jquery中的Promise

    前两篇我们讲了ES6中的Promise以及Promise/A+规范,在Promise的知识体系中,jquery当然是必不可少的一环,所以本篇就来讲讲jquery中的Promise,也就是我们所知道的D ...

随机推荐

  1. 2021-10-18:乘积最大子数组。给你一个整数数组 nums ,请你找出数组中乘积最大的连续子数组(该子数组中至少包含一个数字),并返回该子数组所对应的乘积。力扣152。

    2021-10-18:乘积最大子数组.给你一个整数数组 nums ,请你找出数组中乘积最大的连续子数组(该子数组中至少包含一个数字),并返回该子数组所对应的乘积.力扣152. 福大大 答案2021-1 ...

  2. Spring Boot 配置文件总结

    前言 Spring Boot 中提供一个全局的配置文件:application.properties,这个配置文件的作用就是,允许我们通过这个配置文件去修改 Spring Boot 自动配置的默认值. ...

  3. 简要介绍django框架

    Django是一个高级的Python Web框架,它鼓励快速开发和干净.实用的设计. Django遵循MVC(模型-视图-控制器)设计模式,使得开发者能够更轻松地组织代码和实现功能.以下是Django ...

  4. [安全开发] SQL注入扫描(一股子GPT味~)

    实际上大部分都是它写的,它真我哭 SQL注入扫描就是一种用于检测和预防SQL注入攻击的工具.它通过模拟SQL注入攻击的方式,向目标网站发送特定的SQL查询语句,以验证目标网站是否存在SQL注入漏洞.S ...

  5. 2014年蓝桥杯C/C++大学B组省赛真题(蚂蚁感冒)

    题目描述: 长100厘米的细长直杆子上有n只蚂蚁.它们的头有的朝左,有的朝右. 每只蚂蚁都只能沿着杆子向前爬,速度是1厘米/秒.当两只蚂蚁碰面时,它们会同时掉头往相反的方向爬行.这些蚂蚁中,有1只蚂蚁 ...

  6. 禁用input自动补全,模拟type=password输入字符显示为星号

    最近遇到一个想禁用浏览器的密码自动补全的功能,翻遍了整个技术论坛大多使用用auto-complete="new-password"但是本人测试不怎么管用,所有又找到了如下几种方法, ...

  7. Python日期带时区转换工具类总结

    目录 1.背景 2. 遇到的坑 3. 一些小案例 3.1 当前日期.日期时间.UTC日期时间 3.2 昨天.昨天UTC日期.昨天现在这个时间点的时间戳 3.3 日期转时间戳 3.4 时间戳转日期 3. ...

  8. 【Python入门教程】获取图片可视化精准定位(逆地理编码)

    ​ 使用exifread库读取图片的经纬度信息(WGS84坐标) 使用高德开放API将经纬度转为高德底图经纬度,并输出具体位置 使用folium库,以高德底图为基准,在网页上可视化显示地图和兴趣点 一 ...

  9. TLS详解(原理和实践)

    主页 个人微信公众号:密码应用技术实战 个人博客园首页:https://www.cnblogs.com/informatics/ 引言 本文主要内容涉及到TLS协议发展历程.TLS协议原理以及在HTT ...

  10. Supervisor启动并管理Celery相关进程

    Supervisor启动并管理Celery相关进程 关于celery在运行过程中, 默认情况下是无法在关机以后自动重启的.所以我们一般开发中会使用supervisor进程监控来对celery程序进行运 ...