前言：toRef和toRefs是Vue3中经常用到的API，有着非常重要的作用，搞懂这两个玩意的用法真的很多时候解答我们开发中的问题

作用

  • toRef和toRefs是用于复制reactive里面的属性，然后转成ref。
  • reactive原本是响应式对象，被解构后里面的属性丧失了响应特性。而toRefs可以将一个响应式对象变成普通对象，而将它的属性全部变成相应式属性
  • 类似于浅拷贝的方式，它复制的其实就是引用 + 响应式 ref
  • toRef: 复制 reactive 里的单个属性并转成 ref
  • toRefs: 复制 reactive 里的所有属性并转成 ref

toRef

  1. 简单来说就是toRef函数用于创建一个基于其他响应式对象的单一属性的引用。
  2. 它接收两个参数：第一个参数是一个响应式对象，第二个参数是一个字符串，表示该对象上的属性。
  3. 返回值是一个ref对象，它可以被解构为普通变量使用，但仍然保持与原始对象的关联。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script>
import { reactive, toRef } from 'vue'
export default {
  setup() {
    let info = reactive({
      name: 'Tony',
      age: 30
    })
	// 复制 info 里的 name 属性
    let rName = toRef(info, 'name')
    // 更改 rName
    const onChangeName = () => {
      rName.value = 'Stack!'
    }
    return {
      info,
      rName,
      onChangeName
    }
  }
}
</script>

toRefs

  1. toRefs函数用于将一个响应式对象转化为由多个属性引用组成的普通对象。
  2. 它接收一个参数，即需要转化的响应式对象。
  3. 返回值是一个普通对象，其中每个属性都是通过toRef函数得到的引用。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<template>
  <h2>
    reactive-info-name: {{ info.name }} 
  </h2>
  <h2>
    toRefs-rInfo: {{ rInfo.name.value }}
  </h2>
  <button @click="onChangeInfo">更新</button>
</template>

<script>
import { reactive, toRefs } from 'vue'
export default {
  setup() {
    let info = reactive({
      name: 'Tony',
      age: 30
    })
	// 复制 info 里的 name 属性
    let rInfo = toRefs(info)
    // 更改 rInfo
    const onChangeInfo = () => {
      rInfo.name.value = 'Stack!'
    }
    return {
      info,
      rInfo,
      onChangeInfo
    }
  }
}
</script>