一文带你搞懂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实现右侧滑出层动画
这篇文章主要为大家详细介绍了vue实现右侧滑出层动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-04-04
vue 自动检测手机端响应式布局的五种实现
本文主要介绍了vue自动检测手机端响应式布局,可以通过结合 CSS 媒体查询、Vue 的动态数据绑定、适当的第三方库、PostCSS 插件以及正确的视口设置实现,感兴趣的可以了解一下
2024-07-07
Vuex子模块调用子模块的actions或mutations实现方式
这篇文章主要介绍了Vuex子模块调用子模块的actions或mutations实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
这篇文章主要介绍了Vuejs 2.0 子组件访问/调用父组件的方法(示例代码),需要的朋友可以参考下
2018-02-02
vue-cli 项目打包完成后运行文件路径报错问题
这篇文章主要介绍了vue-cli 项目打包完成后运行文件路径报错问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-07-07
浅谈关于.vue文件中style的scoped属性
本篇文章主要主要介绍了浅谈关于.vue文件中style的scoped属性，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
vue中computed顺序、watch顺序、响应次数使用
这篇文章主要介绍了vue中computed顺序、watch顺序、响应次数使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-08-08
Vue中使用vue-pdf嵌入和展示PDF文件
在vue中实现在线预览PDF文件我们可以使用vue-pdf来实现,下面这篇文章主要介绍了Vue中使用vue-pdf嵌入和展示PDF文件的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-10-10
详解Vue中Computed与watch的用法与区别
这篇文章主要介绍了Vue中computed和watch的使用与区别，文中通过示例为大家进行了详细讲解，对Vue感兴趣的同学，可以学习一下
2022-04-04
vue中添加与删除关键字搜索功能
这篇文章主要介绍了vue中添加与删除，关键字搜索功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-10-10