vue3 to系列使用说明_vue3的to系列有什么作用-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45764825/article/details/125720234

本文介绍了Vue中用于响应式转换的三个关键函数：toRef、toRefs和toRaw。toRef用于将响应式对象的某个属性转化为ref，便于外部使用；toRefs则可以批量将对象属性转化为ref，方便解构。toRaw则用于将响应式对象转为普通对象，避免修改时触发视图更新。通过实例展示了这三个函数的用法和效果，探讨了它们在实际开发中的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

toRef：

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

语法：const name = toRef(person,‘name’)

应用: 要将响应式对象中的某个属性单独提供给外部使用时。

注：

如果原始对象是非响应式的就不会更新视图数据是会变的

如果原始对象是响应式的是会更新视图并且改变数据的

<template>
   <div>
      <button @click="change">点击</button>
      {{state}}
   </div>
</template>
 
<script setup lang="ts">
import { reactive, toRef } from 'vue'
 const obj = {
   foo: 1,
   bar: 1
}
 // bar 转化为响应式对象
const state = toRef(obj, 'bar')
const change = () => {
   state.value++
   console.log(obj, state); 
}
</script>

toRefs

作用：批量创建ref对象，方便我们解构使用

语法：toRefs(person)

import { reactive, toRefs } from 'vue'
const obj = reactive({
   foo: 1,
   bar: 1
})
 
let { foo, bar } = toRefs(obj)
 
foo.value++
console.log(foo, bar);

toRaw：

作用：将一个由reactive生成的响应式对象转为普通对象。

使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。

import { reactive, toRaw } from 'vue'
const obj = reactive({
   foo: 1,
   bar: 1
})
// 响应式对象转化为普通对象 
const state = toRaw(obj)
const change = () => {
   console.log(obj, state);
}