toRef、toRefs、toRaw的使用

最新推荐文章于 2024-05-11 18:24:40 发布

Cy12024

最新推荐文章于 2024-05-11 18:24:40 发布

阅读量765

点赞数 1

分类专栏： VUE3框架文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/weixin_42491648/article/details/128058480

版权

VUE3框架专栏收录该内容

5 篇文章 1 订阅

订阅专栏

本文深入探讨了Vue中的toRef、toRefs和toRaw三个核心概念。toRef将对象的一个属性转换为响应式，而toRefs则将整个对象的属性解构为响应式。当原始对象是响应式时，这些变化会影响视图。toRaw则用于获取响应式对象的原始版本，避免直接修改响应式对象。通过示例代码，展示了它们在实际应用中的工作方式和效果。

摘要由CSDN通过智能技术生成

本文主要讲述toRef、toRefs和toRaw的功能和使用方法。

toRef

功能是将对象的某一个属性变成ref，如果原始对象是响应式的是会更新视图并且改变数据的，如果原始对象是非响应式的就不会更新视图数据是会变的。

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

结果：视图上的数据不变，控制台console的结果是obj={
“foo”: 1,
“bar”: 2
}
state=2

toRefs

将对象中属性逐个解构出来，变成响应式。如果原始对象是响应式的是会更新视图并且改变数据的，如果原始对象是非响应式的就不会更新视图数据是会变的。

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

结果：2,1
如果obj没有使用reactive包裹，则视图不会更新结果。

toRaw

import { reactive, toRaw } from 'vue'
const obj = reactive({
   foo: 1,
   bar: 1
})
const state = toRaw(obj)
// 响应式对象转化为普通对象
const change = () => {
  //state=2;赋值或者操作会报错
   console.log(obj, state);
}