Vue3的ref、isRef、toRef、toRefs、toRaw如何区分使用？

本文共计1727个文字，预计阅读时间需要7分钟。

`ref`、`isRef`、`toRef`、`toRefs`、`toRaw` 是 Vue 3 中用于响应式引用和原始数据访问的函数。以下是对这些函数的简要介绍：

1. ref： - 功能：创建一个响应式引用，用于存储基本类型数据。 - 使用：`const count=ref(0);` - 特点：`ref` 返回一个对象，包含 `value` 属性，可以用来访问或修改存储的值。

2. isRef： - 功能：检查一个值是否是一个响应式引用。 - 使用：`isRef(count);` 返回 `true` 或 `false`。 - 特点：用于类型检查，确保正确处理响应式引用。

3. toRef： - 功能：将响应式引用的某个属性转换为普通响应式引用。 - 使用：`const state=reactive({ count: 0 }); const countRef=toRef(state, 'count');` - 特点：`toRef` 不会触发整个响应式系统的更新，只有当 `state.count` 被修改时，依赖于 `countRef` 的组件才会重新渲染。

4. toRefs： - 功能：将响应式对象的所有属性转换为响应式引用。 - 使用：`const state=reactive({ count: 0, name: 'Vue' }); const stateRefs=toRefs(state);` - 特点：`toRefs` 返回一个对象，对象的每个键都是响应式引用，可以解构使用，如 `const { count, name }=stateRefs;`。

5. toRaw： - 功能：获取响应式引用或响应式对象对应的原始值。 - 使用：`const rawValue=toRaw(countRef);` - 特点：用于在非响应式上下文中使用响应式引用的原始值。

这些函数在处理 Vue 3 的响应式系统时非常有用，特别是在需要操作原始数据或特定属性时。

ref、isRef、toRef、toRefs、toRaw看着一堆类似的东西，一个头两个大，今天整理一篇文章详细介绍它们的功能及区别。

1、ref

ref 属性除了能够获取元素外，也可以使用 ref 函数，创建一个响应式数据，当数据值发生改变时，视图自动更新。

<script lang="ts" setup> import { ref } from 'vue' let str: string = ref('我是张三') const chang = () => { str.value = '我是钻石王老五' console.log(str.value) } </script> <template> <div> {{ str }} <button type="button" @click="chang">修改值</button> </div> </template>

2、isRef

检查变量是否为一个被 ref 包装过的对象，如果是返回 true ，否则返回 false。

import { ref, isRef, reactive } from 'vue' let str: string = ref('我是张三') let num: number = 1 let per = reactive({ name: '代码女神', work: '程序媛' }) console.log('strRes', isRef(str)) //true console.log('numRes', isRef(num)) //false console.log('perRes', isRef(per)) //false

3、toRef

创建一个 ref 对象，其 value 值指向另一个对象中的某个属性。

toRef(obj, key) 将对象中的某个值转化为响应式数据，分为两种情况：

• toRef 定义原始非响应式数据，修改值时，原始数据和 copy 数据都会变的，但是视图不更新。

<script> import { ref, isRef, toRef, reactive } from 'vue' let obj = { name: '姓名', age: 18, } let name: string = toRef(obj, 'name') const chang = () => { obj.name = '钻石王老五' name.value = '李四' console.log(obj.name) // 李四 console.log('name', name) // 李四 } //chang() //DOM挂载前调用 </script> <template> <div> {{ obj.name }} ------- {{ name }} <button type="button" @click="chang">修改值</button> </div> </template>

注意：如果是在 DOM 挂载之前调用 chang 方法，改变数值，此时数据和视图都会发生改变。

• toRef 定义原始数据响应式数据，修改值时，原始数据，和 copy 数据都会改变，视图也会更新。

<script> import { ref, isRef, toRef, reactive } from 'vue' let obj = reactive({ name: '姓名', age: 18, }) let name: string = toRef(obj, 'name') const chang = () => { obj.name = '钻石王老五' name.value = '李四' } </script> <template> <div> {{ obj.name }} ------- {{ name }} <button type="button" @click="chang">修改值</button> </div> </template>

最终值为 “李四”。

4、toRefs

toRefs 用来解构 ref、reactive 包裹的响应式数据。接收一个对象作为参数，遍历对象上的所有属性，将对象上的所有属性变成响应式数据。

let obj = reactive({ name: '姓名', age: 18, }) let { name, age } = toRefs(obj) const chang = () => { name.value = '钻石王老五' age.value++ } </script> <template> <div> {{ name }} ------- {{ age }} <button type="button" @click="chang">修改值</button> </div> </template>

toRefs 解构数据时，如果某些参数作为可选参数，可选参数不存在时就会报错，如：

let obj = reactive({ name: '姓名', age: 18, }) let { name, age, work } = toRefs(obj) const chang = () => { name.value = '钻石王老五' age.value++ console.log('work', work.value) work.value = '程序媛' }

此时可以使用 toRef 解决此问题，使用 toRef 解构对象某个属性时，先检查对象上是否存在该属性，如果存在就继承对象上的属性值，如果不存在就会创建一个。

修改上边的代码为：

let obj = reactive({ name: '姓名', age: 18, }) let { name, age } = toRefs(obj) let work = toRef(obj, 'work') const chang = () => { name.value = '钻石王老五' age.value++ console.log('work', work.value) work.value = '程序媛' }

5、toRaw

将响应式对象转为原始对象。做一些不想被监听的事情，从 ref 或 reactive 得到原始数据。

修改原响应式数据时，toRaw 转换得到的数据会被修改，视图也会更新，如：

<script lang="ts" setup> import { ref, isRef, toRef, toRefs, reactive, toRaw } from 'vue' let obj = reactive({ name: '姓名', age: 18, }) let newObj = toRaw(obj) const chang = () => { obj.name = '钻石王老五' obj.age++ } </script> <template> <div> {{ obj.name }} ------- {{ obj.age }} <button type="button" @click="chang">修改值</button> <br /> {{ newObj }} </div> </template>

如果修改 toRaw 得到的原始数据，原数据也会被修改，但是视图不更新。如：

<script lang="ts" setup> import { ref, isRef, toRef, toRefs, reactive, toRaw } from 'vue' let obj = reactive({ name: '姓名', age: 18, }) let newObj = toRaw(obj) const chang = () => { obj.name = '钻石王老五' obj.age++ } const changNew = () => { newObj.name = '搞笑' console.log('newObj', newObj) console.log('obj', obj) } </script> <template> <div> {{ obj.name }} ------- {{ obj.age }} <button type="button" @click="chang">修改值</button> <br /> {{ newObj }} <button @click="changNew">修改</button> </div> </template>

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对易盾网络的支持。如果你想了解更多相关内容请查看下面相关链接