vue3 toRef和toRefs

举例说，定义一个人有姓名，年龄，工作（工作1的薪水），加三个按钮，可以改名字，改年龄，改薪水。可以这样实现

<template>
  <div class="about">
    <div>{{person}}</div>

    <div>姓名{{person.name}}</div>
    <div>年龄{{person.age}}</div>
    <div>薪水{{person.job.job1.salary}}</div>

    <button @click="person.name+='三'">改姓名</button>
    <button @click="person.age++">改年龄</button>
    <button @click="person.job.job1.salary++">改薪水</button>
    
  </div>
</template>
<script>
import { reactive} from 'vue'
export default {
  name:'nowTest',
  setup() {
    let person = reactive({
        name:'张三',
        age:12,
        job: {
            job1:{
                salary:20
            }
        }
    })
    return {
      person,
    }
  },
}  
</script>

但是呢，页面中显示信息的话总要加个person.，就很繁琐，我们可以用toRef把person属性挨个拆分出来。

<template>
  <div class="about">
    <div>{{person}}</div>

    <div>姓名{{name}}</div>
    <div>年龄{{age}}</div>
    <div>薪水{{salary}}</div>

    <button @click="name+='三'">改姓名</button>
    <button @click="age++">改年龄</button>
    <button @click="salary++">改薪水</button>
    
  </div>
</template>
<script>
import { ref,reactive,toRef,toRefs } from 'vue'
export default {
  name:'nowTest',
  setup() {
    let person = reactive({ 
        name:'张三',
        age:12,
        job: {
            job1:{
                salary:20
            }
        }
    })
    const name1 = person.name
    console.log('name1',name1)//打印出来的只是字符串“张三”

    const name2 = toRef(person,'name')
    console.log('name2',name2)//打印出来的是响应式的

    return {
      person,

      name:toRef(person,'name'),
      age:toRef(person,'age'),
      salary:toRef(person.job.job1,'salary'),
    }
  },
}  
</script>

 

 这样写页面是简洁了，但是如果属性很多，return那里就得堆满一堆，我们可以用toRefs，但是

toRefs只会展示第一层的属性比如name，age和job对象，salary还需要job.job1.salary。

<template>
  <div class="about">
    <div>{{person}}</div>

    <div>姓名{{name}}</div>
    <div>年龄{{age}}</div>
    <div>薪水{{job.job1.salary}}</div>

    <button @click="name+='三'">改姓名</button>
    <button @click="age++">改年龄</button>
    <button @click="job.job1.salary++">改薪水</button>
    
  </div>
</template>
<script>
import { ref,reactive,toRef,toRefs } from 'vue'
export default {
  name:'nowTest',
  setup() {
    let person = reactive({ 
        name:'张三',
        age:12,
        job: {
            job1:{
                salary:20
            }
        }
    })
    const name3 = toRefs(person)
    console.log('name3',name3)

    return {
      person,
      ...toRefs(person)
    }
  },
}  
</script>