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