【vue】toRef，toRefs

本文主要是介绍【vue】toRef，toRefs，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

• toRef：把一个 响应式对象 转换为对应的ref变量
• toRefs：把一个 响应式对象 转换为对应的ref对象

代码

<template><P>mname: {{ mname }} </P><P>mage: {{ mage }} </P><P>msex: {{ msex }} </P><P>mhobby: {{ mhobby }} </P><hr><P>mname1: {{ mname1 }} </P><P>mage1: {{ mage1 }} </P><P>msex1: {{ msex1 }} </P><P>mhobby1: {{ mhobby1 }} </P><hr><P>hobby1: {{ mman }} </P></template><script setup>
import { reactive, ref, toRef, toRefs } from 'vue';let man = reactive({name: 'cxk',age: 25,sex: '男',hobby: ['唱', '跳', 'rap']
});const mname = toRef(man, 'name');
const mage = toRef(man, 'age');
const msex = toRef(man, 'sex');
const mhobby = toRef(man, 'hobby');
//解构
const { name: mname1, age: mage1, sex: msex1, hobby: mhobby1 } = toRefs(man);const mman = toRefs(man);console.log(mname, mage, msex, mhobby);
console.log(mname1, mage1, msex1, mhobby1);
console.log(mman);
</script><style lang="scss" scoped></style>

参考

https://www.bilibili.com/video/BV1nV411Q7RX

这篇关于【vue】toRef，toRefs的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---