当前位置：首页 > news >正文

【vue3】toRef与toRefs的使用，toRef与ref的区别

news 2025/7/10 4:01:26

假期第四篇，对于基础的知识点，我感觉自己还是很薄弱的。
趁着假期，再去复习一遍
1、toRef与toRefs

创建一个ref对象，其value值指向另一个对象中的某个属性
语法：const name = toRef（person,‘name’）
应用：要将响应式对象中的某个属性单独提供给外部使用时
扩展：toRefs与toRef功能一致，但可以批量创建多个ref对象，语法：toRefs(person)

示例：当定义penson为响应式对象时，再定义一个变量去接收对象中的某个值，
const name1 = person.name 这种方式name1不具有响应式
const name2 = toRef(person,‘name’) 这种方式name2具有响应式

<template><div><h2>姓名：{{ person.name }}</h2><h2>性别：{{ person.sex }}</h2><h2>工作：{{ person.job.job1.work }}</h2><button @click="person.name += '~'">姓名变了</button><br /><button @click="person.sex += '！'">性别变了</button><br /><button @click="person.job.job1.work += '还有其他工作'">工作变了</button></div>
</template>
<script >
import { ref, reactive,toRef } from "vue";
export default {name: "demo",setup() {let person = reactive({name: "莲花",sex: "男",job: {job1: {work: "侦探",},},});const name1 = person.name;console.log(name1, "name1");const name2 = toRef(person,'name')console.log(name2, "name2");return {person,};},
};
</script>
<style scoped></style>

在这里插入图片描述

如果模板区想简化成这样

<template><div><h2>姓名：{{ name }}</h2><h2>性别：{{ sex }}</h2><h2>工作：{{ work }}</h2><button @click="name += '~'">姓名变了</button><br /><button @click="sex += '！'">性别变了</button><br /><button @click="work += '还有其他工作'">工作变了</button></div>
</template>
<script >

就要用到toRef

<script >
import { ref, reactive, toRef } from "vue";
export default {name: "demo",setup() {let person = reactive({name: "莲花",sex: "男",job: {job1: {work: "侦探",},},});const name1 = person.name;console.log(name1, "name1");const name2 = toRef(person, "name");console.log(name2, "name2");return {//toRef接收的第一个参数是对象，第二个是属性键name: toRef(person, "name"),sex: toRef(person, "sex"),work: toRef(person.job.job1, "work"),};},
};
</script>