toRef与toRefs

toRef

1. 作用：用于创建一个ref对象，让其value值指向源ref对象中的某个属性，用于保持响应式

2. 语法：toRef(源ref对象, '属性名')

   import {
         
          reactive, toRef } form 'vue'
   export default {
         
         
   	setup () {
         
         
       let person = reactive({
         
         
         name: '张三',
         sex: '男',
         info: {
         
         
           age: 22
         }
       })
   
       // 让name1指向了person对象中的name属性，响应式仍然存在；当name1的值改变时，person对象中的name也会改变，反之亦然
       const name1 = toRef(person, 'name')
   
       // 将person对象中的name赋值给name2，不具备响应式
       // 以下代码相当于：const name2 = '张三'
       const name2 = person.name
       
       return {
         
         
         person,
         // 交出person对象中的name
         name1
       }
     }
   }
   

3. 应用场景：要将响应式对象中的某个属性单独提供给外部使用并且依然保持响应式时

toRefs

1. 作用：与toRef的功能一致，但是可以批量创建多个ref对象
2. 语法：toRefs(源ref对象)

   import {
         
          reactive, toRefs } form 'vue'
   
   export default {
         
         
   	setup () {
         
         
       let person = reactive({
         
         
         name: '张三',
         sex: '男',
         info: {
         
         
           age: 22
         }
       })
       
       return {
         
         
         // 使用toRefs将name, sex, info都使用响应式的形式return出去
         ...toRefs(person)
         // 以上代码等同于以下三行代码
         // name: toRef(person, 'name')
         // sex: toRef(person, 'sex')
         // info: toRef(person, 'info')
       }
     }
   }