Vue3 中toRefs与toRef区别

前言

Vue3 中toRefs与toRef区别

一、toRefs 与 toRef

• 作用：将一个响应式对象中的每一个属性，转换为ref对象。并且改变解构的值，也会影响到原响应式对象的值。
• 注意：toRefs与toRef功能一致，但toRefs可以批量转换。

二、toRefs

批量解构变成响应式对象
代码如下（示例）：

<template>
  <div class="person">
    <h2>姓名：{{person.name}}</h2>
    <h2>年龄：{{person.age}}</h2>
    <h2>性别：{{person.gender}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeGender">修改性别</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {ref,reactive,toRefs} from 'vue'

  // 数据
  let person = reactive({name:'张三', age:18, gender:'男'})
	
  // 通过toRefs将person对象中的n个属性批量取出，且依然保持响应式的能力
  //改变name和gender的值，也会影响到person里面的值
  let {name,gender} =  toRefs(person)
  // 方法
  function changeName(){
    name.value += '~'
  }
  function changeAge(){
    age.value += 1
  }
  function changeGender(){
    gender.value = '女'
  }
</script>

三、toRef

单个解构变成响应式
代码如下（示例）：

<template>
  <div class="person">
    <h2>姓名：{{person.name}}</h2>
    <h2>年龄：{{person.age}}</h2>
    <h2>性别：{{person.gender}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeGender">修改性别</button>
  </div>
</template>

<script lang="ts" setup name="Person">
  import {ref,reactive,toRefs} from 'vue'

  // 数据
  let person = reactive({name:'张三', age:18, gender:'男'})
	
  // 通过toRef将person对象中的gender属性取出，且依然保持响应式的能力
  let age = toRef(person,'age')
  // 方法
  function changeAge(){
    age.value += 1
  }

</script>

总结

例如：以上就是今天要讲的内容，本文仅仅简单介绍了toRef和toRefs的使用和区别.