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",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
    }
    //  ...state虽然我们通过解构的方式。不要在视图上进行点了。但是数据却没有响应
    return {...state2,changeHander}
  }
};
</script>

4.优化一下，在toRefs的时候进行解构

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

    <button @click="changeHander">改变内容</button>
  </div>
</template>
<script>
import {   reactive,age:40
    })
    // 这里进行了一次解构
    let {name,age }=toRefs(state);
    function changeHander(){
        name.value="李四222"
        age.value=80
    }
    return {name,age,changeHander}
  }
};
</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,age }=toRefs(state);
    // 这样在视图上就直接使用值了
    let {name1,age1}=useInfo();
    function changeHander(){
        name.value="李四222"
        age.value=80
    }
    return {name,changeHander,name1,age1}
  }
};

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