【Vue3】ToRef 和 ToRefs

背景

随着年龄的增长，很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来，技术出身的人总是很难放下一些执念，遂将这些知识整理成文，以纪念曾经努力学习奋斗的日子。本文内容并非完全原创，大多是参考其他文章资料整理所得，感谢每位技术人的开源精神。

简介

本文介绍 Vue3 中 ToRef 和 ToRefs 的用法。

toRef 和 toRefs 用于将 reactive 定义的响应式数据对象中的属性转换成 ref 定义，既保留了属性的响应式行为，也保留了引用，即更新 ref 定义的响应式数据会同步更新其对应的 reactive 响应式数据对象中的原属性。其中 toRef 指定转换单个属性，toRefs 可以配合 JavaScript 解构赋值转换多个属性。

开发环境

分类	名称	版本
操作系统	Windows	Windows 11
IDE	Visual Studio Code	1.91.1

开发步骤及源码

在 【Vue3】响应式数据 基础上修改 Vue 根组件 App.vue 代码。

<!-- 组件结构 -->
<template>
    <div class="person">
        <h3>姓名：{{ name }}</h3>
        <h3>Name：{{ nameX }}</h3>
        <h3>生日：{{ birth.getFullYear() + '-' + (birth.getMonth() + 1) + "-" + birth.getDate() }}</h3>
        <button @click="showContact">查看联系方式</button>
        <button @click="changeName">修改名字</button>
    </div>
</template>

<script setup lang="ts" name="App">
import { reactive, toRef, toRefs } from 'vue'

let person = reactive({
    name: '哈利·波特',
    birth: new Date('1980-07-31'),
    contact: '霍格沃茨魔法学校格兰芬多学院'
})

let { name, birth } = toRefs(person)
let nameX = toRef(person, 'name')

// 方法定义
function showContact() {
    alert(person.contact)
}

function changeName() {
    nameX.value = 'Harry Potter'
}
</script>

<!-- 组件样式 -->
<style lang="scss">
.person {
    background-color: cadetblue;
    border-radius: 5px;
    color: white;
    padding: 20px;
    
    button {
        background-color: gold;
        border-radius: 5px;
        padding: 5px 10px;
        margin-right: 10px;
    }
}
</style>

原文地址：https://blog.csdn.net/Silent_Paladin/article/details/140572956

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！