vue3 toRefs详解

简介

toRefs函数的作用是将响应式对象中的所有属性转换为单独的响应式数据，对象成为普通对象，并且值是关联的。在这个过程中toRefs会做以下两件事：

1. 把一个响应式对象转换成普通对象
2. 对该普通对象的每个属性都做一次ref操作，这样每个属性都是响应式的 说明：

a、reactive 对象取出的所有属性值都是非响应式的，而利用 toRefs 可以将一个响应式 reactive
b、 对象的所有原始属性转换为响应式的 ref 属性。

c、reactive的响应式功能是赋值给对象，如果展开对象，会让数丢失响应的能力

使用toRefs可以保证对象展开的每个属性都是响应式的

应用场景：

• 展开响应式对象时，想使用响应式对象中的多个或者所有属性做为响应式数据。
• 当函数返回响应式对象时，toRefs非常有用，这样消费组件就可以在不丢失响应式的情况下对返回的对象进行分解使用。

示例：展开运算符

<template><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><h2>地址：{{addr.province}}-{{addr.city}}</h2><button @click="name='zhangsan'">修改名字</button>
</template>
<script lang='ts'>import { reactive } from 'vue'export default {setup() {const user = reactive<any>({name: '张三',age: 19,addr: {province: '河南',city: '郑州'}})return {...user // 展开运算符}}}
</script>

注意：响应式对象的处理，是加给对象的，如果对对象做了展开操作，那么就会丢失响应式的效果。所以上面代码，单击button时，不能改变页面显示效果。

示例：

<template><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><h2>地址：{{addr.province}}-{{addr.city}}</h2><button @click="name='zhangsan'">修改名字</button>
</template>
<script lang='ts'>import { reactive, toRefs } from 'vue'export default {setup() {const user = reactive<any>({name: '张三',age: 19,addr: {province: '河南',city: '郑州'}})return {...toRefs(user)}}}
</script>

本次单击按钮可以实现修改效果。