Vue3详解ref()用法

您所在的位置：网站首页 › 冰箱上的ref和frz › Vue3详解ref()用法

Vue3详解ref()用法

2024-07-12 18:01:28| 来源: 网络整理| 查看: 265

一、ref()作用处理响应式数据。用于访问组件中的 DOM 元素、组件实例以及存储任何需要在组件中进行状态管理的值。二、处理响应式数据

ref( ) 接受一个内部值，返回一个ref 对象，这个对象是响应式的、可更改的，且只有一个指向其内部值的属性 .value。ref() 将传入参数的值包装为一个带 .value 属性的 ref 对象。

2.1 ref 对象是可更改的，即可以为 .value 赋予新的值

举例：

const a = ref(1); // 为 a.value 赋予新的值 a.value = 2; console.log("a--->", a); console.log("a.value--->", a.value);

查看打印结果：

1 2.2 ref 对象是响应式的，即所有对 .value 的操作都将被追踪，并且写操作会触发与之相关的副作用

ref()方法允许创建可以使用任何值类型的响应式 ref。ref 的 .value 属性也是响应式的。当ref的值为对象类型时，会用 reactive() 自动转换它的 .value。

举例：一个包含对象类型值的 ref 可以响应式地替换整个对象

const b = ref({ name: 'vue3' }); // 响应式替换 b.value = { name: 'vite' }; console.log("b--->", b); console.log("b.value--->", b.value);

查看打印结果：

ref 被传递给函数或是从一般对象上被解构时，不会丢失响应性：

const obj = { foo: ref(0), bar: ref(1) } // 该函数接收一个 ref // 需要通过 .value 取值 // 但它会保持响应性 callSomeFunction(obj.foo); // 仍然是响应式的 const { foo, bar } = obj;

总结：ref() 让我们能创造一种对任意值的 “引用”，并能够在不丢失响应性的前提下传递这些引用。这个功能很重要，因为它经常用于将逻辑提取到组合函数中。

2.3 ref 在模板中的解包

当 ref 在模板中作为顶层属性被访问时，它们会被自动“解包”，所以不需要使用 .value。

import { ref } from 'vue'; const a = ref(1); a:{{ a }}

请注意，仅当 ref 是模板渲染上下文的顶层属性时才适用自动“解包”。

import { ref } from 'vue'; const obj = { count: ref(1) } {{ obj.count + 1 }}

渲染的结果是 [object Object]1，因为 object.count 是一个 ref 对象

可以通过将 count 改成顶层属性来解决这个问题：

import { ref } from 'vue'; const obj = { count: ref(1) } // 将 count 改成顶层属性 const { count } = obj; {{ count + 1 }}

渲染结果是 2

如果一个 ref 是文本插值计算的最终值，它也将被解包

import { ref } from 'vue'; const obj = { count: ref(1) } const { count } = obj; {{ count + 1 }} {{ obj.count }}

{{ obj.count }}的渲染结果为 1

这只是文本插值的一个方便功能，相当于 {{ object.foo.value }}

5 2.4 ref 在响应式对象中的解包

当一个 ref 被嵌套在一个响应式对象中，作为属性被访问或更改时，它会自动解包，因此会表现得和一般的属性一样：

import { ref, reactive } from 'vue'; const a = ref(0); const obj = reactive({ a }) console.log("obj.a--->", obj.a); obj.a = 2; console.log("a.value--->", a.value);

查看打印结果：

如果将一个新的 ref 赋值给一个关联了已有 ref 的属性，那么它会替换掉旧的 ref：

import { ref, reactive } from 'vue'; const a = ref(0); const other = ref(1); const obj = reactive({ a }) // 将一个新的 ref 赋值给一个关联了已有 ref 的属性 obj.a = other; console.log("obj.a--->", obj.a); // 原始 ref 现在已经和 obj.a 失去联系 console.log("a.value--->", a.value);

查看打印结果：

只有当嵌套在一个深层响应式对象内时，才会发生 ref 解包。当其作为浅层响应式对象的属性被访问时不会解包。

2.5 ref在数组和集合类型的解包

跟响应式对象不同，当 ref 作为响应式数组或像 Map 这种原生集合类型的元素被访问时，不会进行解包。

import { ref, reactive } from 'vue'; const books = reactive([ref('Vue 3 Guide')]); // 这里需要 .value console.log(books[0].value); const map = reactive(new Map([['count', ref(0)]])); // 这里需要 .value console.log(map.get('count').value); 2.6 ts为 ref() 标注类型

ref 会根据初始化时的值推导其类型：

import { ref } from 'vue' // 推导出的类型：Ref const year = ref(2020) // => TS Error: Type 'string' is not assignable to type 'number'. year.value = '2020'

有时我们可能想为 ref 内的值指定一个更复杂的类型，可以通过使用 Ref 这个类型

import { ref } from 'vue' import type { Ref } from 'vue' const year: Ref = ref('2020') year.value = 2020 // 成功！

或者，在调用 ref() 时传入一个泛型参数，来覆盖默认的推导行为：

// 得到的类型：Ref const year = ref('2020') year.value = 2020 // 成功！

如果你指定了一个泛型参数但没有给出初始值，那么最后得到的就将是一个包含 undefined 的联合类型：

// 推导得到的类型：Ref const n = ref() 三、用于访问组件中的 DOM 元素 3.1 访问 DOM 元素

通过 ref 可以访问到在组件中定义的 DOM 元素，例如：input、div、img 等。可以使用 $refs 属性访问到这些元素。

Focus Input import { ref } from 'vue' export default { setup() { const myInput = ref(null) function focusInput() { myInput.value.focus() } return { myInput, focusInput } } } 3.2 访问组件实例

可以使用 ref 访问到组件的实例，以便在父组件中直接调用子组件中暴露的方法或访问子组件中暴露的数据。

Call Child Method import Child from './Child.vue' export default { components: { Child }, setup() { const childComponent = ref(null) function callChildMethod() { childComponent.value.myMethod() } return { childComponent, callChildMethod } } } 3.3 存储任何需要在组件中进行状态管理的值

除了用于处理响应式数据，ref 还可以用于存储任何需要在组件中进行状态管理的值，例如：定时器 ID、请求状态等等。

Fetch Data import { ref } from 'vue' export default { setup() { const isLoading = ref(false) const timerId = ref(null) function fetchData() { isLoading.value = true timerId.value = setTimeout(() => { isLoading.value = false clearTimeout(timerId.value) }, 3000) } return { isLoading, fetchData } } }

这些都是 ref 函数在 Vue 3 中的一些用法，除了处理响应式数据之外，它还可以访问 DOM 元素、组件实例以及存储任何需要在组件中进行状态管理的值，使得 Vue 3 变得更加灵活和方便。

资料来源： Vue3超详细的ref()用法，看这一篇就够了

Vue3中ref的用法总结，避免混淆

【本文地址】

公司简介

联系我们

今日新闻

点击排行

实验室常用的仪器、试剂和: 说到实验室常用到的东西，主要就分为仪器、试剂和耗

不用再找了，全球10大实验: 01、赛默飞世尔科技（热电）Thermo Fisher Scientif

三代水柜的量产巅峰T-72坦: 作者：寞寒最近，西边闹腾挺大，本来小寞以为忙完这

通风柜跟实验室通风系统有: 说到通风柜跟实验室通风，不少人都纠结二者到底是不

集消毒杀菌、烘干收纳为一: 厨房是家里细菌较多的地方，潮湿的环境、没有完全密

实验室设备之全钢实验台如: 全钢实验台是实验室家具中较为重要的家具之一，很多

图片新闻

实验室药品柜的特性有哪些: 实验室药品柜是实验室家具的重要组成部分之一，主要

小学科学实验中有哪些教学: 计算机计算器一般打孔器打气筒仪器车显微镜

实验室各种仪器原理动图讲: 1.紫外分光光谱UV分析原理：吸收紫外光能量，引起分

高中化学常见仪器及实验装: 1、可加热仪器：2、计量仪器：（1）仪器A的名称：量

微生物操作主要设备和器具: 今天盘点一下微生物操作主要设备和器具，别嫌我啰嗦

浅谈通风柜使用基本常识: 　众所周知，通风柜功能中最主要的就是排气功能。在

Vue3详解ref()用法

Vue3详解ref()用法

今日新闻

点击排行

推荐新闻

图片新闻

专题文章