toRef 与 toRefs

作用

将一个响应式对象中的每一个属性, 转换为ref对象

区别

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 { reactive, toRefs, toRef } from 'vue'

  // 数据
  let person = reactive({ name: '张三', age: 18, gender: '男' })

  // 通过 toRefs 将 person 对象中的 n个 属性批量取出, 且依然保持响应式的能力
  let { name, gender } = toRefs(person)

  // 通过 toRef 将 person 对象中的 gender 属性取出, 且依然保持响应式的能力
  let age = toRef(person, 'age')

  // 方法
  function changeName(){
    name.value += '~'
  }
  function changeAge(){
    age.value += 1
  }
  function changeGender(){
    gender.value = '女'
  }
</script>