Vue3中使用toRefs对数据进行解构

1 使用reactive 实现数据的响应式

<template>
  <div>
    <h2>toRef的使用</h2>
    <p> 姓名：{{state.name }} </p>
    <p>年龄:{{ state.age }} </p>
    <button @click="changeHander">改变内容</button>
  </div>
</template>
<script>
import {   reactive }  from "vue"
export default {
  name: "App",
  setup() {
   let  state=reactive({
     name:'李四',
     age:40
   })
   function changeHander(){
     state.name="李四222"
     state.age=80
   }
   return {state,changeHander}
  }
};
</script>

虽然上面可以使用数据的响应式。
但是有时属性值很多，
可能有达到几十个值。
这样在视图上一个个属性点(.) 会很麻烦
可不可以不通过点也能够正常的去渲染和自动更新视图呢？
这个时候，机智的小伙伴们可能就想到到解构
那么我们来尝试一下。

2.使用解构

<template>
  <div>
    <h2>toRef的使用</h2>
    <p> 姓名：{{name }} </p>
    <p>年龄:{{ age }} </p>

    <button @click="changeHander">改变内容</button>
  </div>
</template>
<script>
import {   reactive }  from "vue"
export default {
  name: "App",
  setup() {
   let  state=reactive({
     name:'李四',
     age:40
   })
   function changeHander(){
     state.name="李四222"
     state.age=80
   }
    //  ...state虽然我们通过解构的方式。在视图上进行点击。但是数据却没有响应
   return {...state,changeHander}
  }
};
</script>

我们发现使用解构视图并没有改变。
说明使用解构不行。
这个时候我们今天的主角toRefs就登场了
toRefs 可以把一个响应式对象转换为普通的对象。
该普通对象的每一个值都是ref。
由于变成了ref，所以我们需要使用value。
赶紧往下看看

3. 初次使用toRefs

<template>
  <div>
    <h2>toRef的使用</h2>
    <p> 姓名：{{name }} </p>
    <p>年龄:{{ age }} </p>
    <button @click="changeHander">改变内容</button>
  </div>
</template>
<script>
import {   reactive, toRefs }  from "vue"
export default {
  name: "App",
  setup() {
    let  state=reactive({
        name:'李四',
        age:40
    })
    //  toRefs 可以把一个响应式对象转换为普通的对象。
    //  该普通对象的每一个值都是ref
    // age: ObjectRefImpl {_object: Proxy, _key: "age", __v_isRef: true}
    // name: ObjectRefImpl {_object: Proxy, _key: "name", __v_isRef: true}
    let state2=toRefs(state);
    console.log( 'state2==>ref',state2 )
    function changeHander(){
        // 由于变成了ref，所以我们需要使用value
        state2.name.value="李四222"
        state2.age.value=80
    }
    //  使用这种方式成功结构，能够在页面上正确响应
    return {...state2,changeHander}
  }
};
</script>

4.Vue3中toRefs的使用之页面上快速展示内容 【可以直接看这里】

<template>
  <div class="home">
    <button @click="changeValue">改变值</button>
    <li>{{ name }}</li>
    <li>{{ age }}</li>
    <li>{{ sex }}</li>
    <li>{{ nianxin }}</li>
    <li>{{ height }}</li>
  </div>
</template>
<script lang="ts">
import { defineComponent ,reactive,toRefs} from 'vue';
export default defineComponent({
  name: 'Home',
  setup(){
    let obj=reactive({
      name:'张三',
      age:30,
      sex:'男',
      nianxin:'20W',
      height:'1.8m'
    })
    let changeValue=()=>{
      obj.name='李四'
      obj.age=40
    }
    return {
      ...toRefs(obj),
      changeValue
    }
  }
});
</script>

5. toRefs 可以和 hook 进行搭配使用

<template>
  <div>
    <h2>toRef的使用</h2>
    <p> 姓名：{{name }} </p>
    <p>年龄:{{ age }} </p>
    <button @click="changeHander">改变内容</button>
    <h1>==========奥特曼信息==========</h1>
    <p> 姓名：{{name1 }} </p>
    <p>年龄:{{ age1 }} </p>
  </div>
</template>
<script>
import {   reactive, toRefs }  from "vue"
export default {
  name: "App",
  setup() {
    let  state=reactive({
        name:'李四',
        age:40
    })
    // 这里进行了一次解构
    let {name,age }=toRefs(state);
    // 这样在视图上就直接使用值了
    let {name1, age1}=useInfo();
    function changeHander(){
        name.value="李四222"
        age.value=80
    }
    return {name,age,changeHander, name1, age1}
  }
};

// 假设我定义的一个hook
function useInfo(){
  let sate=reactive({
    name1:"奥特曼",
    age1:1000
  })
   //这里变成响应式并且解构
   return { ...toRefs(sate) }
}
</script>