Cocolib

Appearance

On this page

to系列全家桶 ​

1. toRef ​

【Vue3】如何理解ref toRef和toRefs - 掘金 (juejin.cn)

  • 针对一个响应式对象的prop
  • 创建一个ref，具有响应式
  • 两者保持引用关系

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

vue
<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>

2. toRefs ​

可以帮我们批量创建ref对象主要是方便我们解构使用

js
import { reactive, toRefs } from 'vue'
const obj = reactive({
   foo: 1,
   bar: 1
})
 
let { foo, bar } = toRefs(obj)		//返回的是一个map类型
 
foo.value++
console.log(foo, bar);

3. toRaw ​

将响应式对象转化为普通对象

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

4. 为什么需要toRef和toRefs ​

  • 初衷: 在不丢失响应式的前提下,对对象数据进行解构
  • 前提: 针对的是响应式对象,不是普通对象
  • 结果: 不创造响应式,只延续响应式