【Vue3】toRef和toRefs的用法与示例（图文+代码）

一、toRef功能解读

 let person = reactive( {name: '张三', age: 18, job: { j1: { salary: 20 }}} )  // person对象

return { 

        person,  // 把数组对象【全部】设置成响应式，但是如果对象数组太大，而且只需要响应其中某一个值，要是全部响应，就会大大影响性能。

         name: toRef(person, 'name'),   // 因此，toRef就有了响应数组对象中【某一个值】的响应

        ...toRefs(person)   // toRefs 是只把对象的【父级】（name,age,job）全部设定为响应

}

 

<template>
  <span>{{ person }}</span>
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <h2>薪资：{{ salary }}K</h2>
  <button @click="name += '~'">修改姓名</button> &emsp;
  <button @click="age++">增涨年龄</button>&emsp;
  <button @click="salary++">涨薪</button>
</template>
<script>
import { reactive, toRef, toRefs } from 'vue'
export default {
  name: 'App',
  setup() {
    let person = reactive({
      name: '张三',
      age: 18,
      job: {
        j1: {
          salary: 20
        }
      }
    })
    return {
      // person, // 将整个数组对象设成响应式
      // name: toRef(person, 'name'),
      // age: toRef(person, 'age'),
      // salary: toRef(person.job.j1, 'salary'),
      ...toRefs(person)

    }
  }
}
</script>