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>
遇见问题,这是你成长的机会,如果你能够解决,这就是收获。
作者:晚来南风晚相识
出处:https://www.cnblogs.com/IwishIcould/
本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
如果文中有什么错误,欢迎指出。以免更多的人被误导。
出处:https://www.cnblogs.com/IwishIcould/
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!
万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
![](http://images.cnblogs.com/cnblogs_com/IwishIcould/1900124/t_201214043958支付宝收款码.jpg?a=1607924145179)
支付宝
![](http://images.cnblogs.com/cnblogs_com/IwishIcould/1900124/t_20121604194271E6E296CCB71A007F4E22073D5EB64A.jpg)
微信
如果文中有什么错误,欢迎指出。以免更多的人被误导。