toRef和toRefs

• 作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。

• 语法：const name = toRef(person,'name')

• 应用: 要将响应式对象中的某个属性单独提供给外部使用时。

• 扩展：toRefs 与toRef功能一致，但可以批量创建多个 ref 对象，语法：toRefs(person)

  • 　　torefs 可以处理一个对象里面的多个属性[ 只有第一层 ]

 

<template>
    <div>
      <!-- 姓名 : {{data.name}} <br>
      公司 : {{data.obj.name}}  <br>
      工资 : {{data.obj.moneys.money}} -->

      <!-- 第一种方法 : 结果丢失了响应式-->
      <!-- 姓名 : {{name}} <br>
      公司 : {{name1}}  <br>
      工资 : {{money}} -->

      <!-- 第二种方法 :  -->
      <!-- 姓名 : {{name}} <br>
      公司 : {{name1}}  <br>
      工资 : {{money}} -->

      <!-- 第三种方法 :  -->
      姓名 : {{name}} <br>
      公司 : {{obj.name}}  <br>
      工资 : {{obj.moneys.money}}
    </div>
</template>

<script>
    import {reactive, toRef, toRefs}    from 'vue'
    export default {
        name: 'App',
        setup() {
      let data = reactive({
        name:'吴宇腾',
        obj:{
          name:'sqy',         
          moneys:{
            money:20,
          }
        }
      })

      // return {data}

      // 1.为了上面方便不写那么多data,想到第一种方法
        // return {
        //   name : data.name,
        //   name1 : data.obj.name,
        //   money : data.obj.moneys.money
        // }

      // 2.使用toRef 
        // 第一种方法的毛病 : 
        // let nameY  = data.name 
        // console.log(nameY) //得到吴宇腾
        // nameY = '杨志伟' //修改了
        // console.log(nameY,data) //得到是杨志伟,但是data里面的还是吴宇腾

        // 第二种方法的好处 : 响应式
        // let nameX = toRef(data,'name')
        // console.log('获取data响应式的值 : ',nameX.value)
        // data.name = '杨志伟'
        // console.log('修改后data的值 :',data.name,'对应响应式的值 :',nameX.value)

        // 所以就可以变成这样 : 
        // return {
        //   name : toRef(data,'name'),
        //   name1 : toRef(data.obj,'name'),
        //   money : toRef(data.obj.moneys,'money')
        // }

      // 第三中方法 : 简化,只能得到第一层哦 toRefs(多个的)
        return {
          ...toRefs(data)
        }
        }
    }
</script>