一文带你搞懂Vue3中的各种ref的使用

更新时间：2023年08月16日 14:06:07 作者：web前端进阶

在 Vue3 中，有许多与响应式相关的函数，例如 toRef、toRefs、isRef、unref 等等,本文将详细介绍这些函数的用法，让我们在实际开发中知道应该使用哪些 API 并能够熟练地回答面试官的相关问题

在 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的使用的文章就介绍到这了,更多相关Vue3 ref内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue3
ref

vue中mapbox地图显示一半的问题及解决方法
在vue中创建mapbox地图，地图只显示一般，查看浏览器开发者工具，发现将canvas.mapboxgl-canvas 的position:absolute去掉就解决了，今天小编通过本文给大家分享详细过程，感兴趣的朋友跟随小编一起看看吧
2023-07-07
vue实现鼠标移过出现下拉二级菜单功能
这篇文章主要介绍了vue实现鼠标移过出现下拉二级菜单功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-12-12
vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能
这篇文章主要介绍了vue+echarts+datav大屏数据展示及实现中国地图省市县下钻,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-11-11
Vue插槽slot全部使用方法示例解析
插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签，这篇文章主要介绍了Vue插槽的理解和使用,需要的朋友可以参考下
2023-03-03
基于vue.js路由参数的实例讲解——简单易懂
下面小编就为大家带来一篇基于vue.js路由参数的实例讲解——简单易懂。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
基于Vue渲染与插件的加载顺序的问题详解
下面小编就为大家分享一篇基于Vue渲染与插件的加载顺序的问题详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
vue中v-for循环选中点击的元素并对该元素添加样式操作
这篇文章主要介绍了vue中v-for循环选中点击的元素并对该元素添加样式操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
Vue实现回到顶部和底部动画效果
这篇文章主要为大家详细介绍了Vue实现回到顶部和底部动画效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-07-07
Vue3 页面,菜单,路由的使用
这篇文章主要介绍了Vue3之页面,菜单,路由的使用，文章围绕Vue3页面,菜单,路由相关资料展开详细内容,需要的朋友可以参考一下
2021-11-11
关于element-ui表单中限制输入纯数字的解决方式
这篇文章主要介绍了关于element-ui表单中限制输入纯数字的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09