VUE3 toRef toRefs的基本用法-摩杜云开发者社区

Vue3的CompositionAPI 创建响应式对象的方式： ref reactive toRef toRefs

ref 和reactive 实际使用中比较常见；

toRef

针对一个响应式对象（reactive 封装）的 prop（属性）创建一个ref，且保持响应式
两者保持引用关系

<template>
  <h2>
    reactive-name: {{ info.name }} 
  </h2>
  <h2>
    toRef-name: {{ copyName }}
  </h2>
  <button @click="onChange">更换问候语</button>
</template>

<script>
import { reactive, toRef } from 'vue'
export default {
	setup() {
    let info = reactive({
      name: '姓名',
      age: '老年人'
    })
	// 复制 info 里的 name 属性
    let copyName = toRef(info, 'name')
    // 更改 rGreet
    const onChange = () => {
      copyName.value = '新姓名!'
    }
    return {
      info,
      copyName,
      onChange
    }
  }
}
</script>

toRefs

toRefs 是一种用于破坏响应式对象并将其所有属性转换为 ref 的实用方法
将响应式对象（reactive封装）转成普通对象
对象的每个属性(Prop)都是对应的ref
两者保持引用关系
基础类型值(String，Number，Boolean，Symbol) 或单值对象(类似{ count: 1 }这样只有一个属性值的对象) 使用 ref
引用类型值(Object、Array)使用 reactive

const state = reactive({
obj1:{key:"你好"},
obj2:{key:"麦积山"}
});

return {...state}; // 这种方式将丢失响应式，是一种错误的方式

return toRefs(state); // works

const state = reactive({
obj1:{key:"你好"},
obj2:{key:"麦积山"}
});

const (obj1,obj2) = toRefs(state)

注意reactive封装的响应式对象，不要通过解构的方式return，这是不具有响应式的。可以通过 toRefs 处理，然后再解构返回，这样才具有响应式

总结

toRef 和 toRefs 可以用来复制 reactive 里面的属性然后转成 ref，而且它既保留了响应式，也保留了引用，也就是你从 reactive 复制过来的属性进行修改后，除了视图会更新，原有 ractive 里面对应的值也会跟着更新，如果你知道浅拷贝的话那么这个引用就很好理解了，它复制的其实就是引用 + 响应式； ref 不加 s 和加 s 的区别就是这样：toRef: 复制 reactive 里的单个属性并转成； reftoRefs: 复制 reactive 里的所有属性并转成 ref