Vue3 中使用 toRefs的方法

首先画出模板

XML 复制代码
<template>
    <div class="person">
        <h2>姓名:{{ person.name }}</h2>
        <h2>年龄:{{ person.age }}</h2>
        <button @click="showTel">查看联系方式</button>
        <button @click="changeName">修改名字</button>
        <button @click="chanegAge">修改年龄</button>
    </div>
    
</template>

定义响应式对象

XML 复制代码
<script lang="ts" setup name="PersonToRefs">
import { ref, reactive,toRefs } from 'vue'

const person = reactive({
    name: "zhangsan",
    age: 18,
    tel :123456789
})

// 现在将数据进行解析出来
// const {name,age} = person //此时的name,age并不是响应式的
const {name,age} = toRefs(person) //此时的name,age是响应式的,但是其值是响应式的,但是其值是结构成ref(响应式)对象的数据


function changeName(){
    person.name = person.name + '~'
    console.log("name",name.value);
    console.log("person.name",person.name);
}

function chanegAge(){
    person.age = person.age + 1
    console.log("age",age.value);
    console.log("person.age",person.age);
}

function showTel(){
    alert(person.tel)
}

</script>

样式:

XML 复制代码
<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px
}
</style>

小结:

当我们使用,reactive定义响应式对象的时候,使用let{name,age} = person 解析对象后,

其name,age并不是响应式的,因此我们需要使用,toRefs属性,将其转化为响应式的

并且,使用toRefs转化后的name,age其变成了,与person相关联的Ref响应式数据

当只需要某个对象的单个属性的时候,可以使用toRef

XML 复制代码
const roRefName = toRef(person,'name')

console.log(roRefName.value);
相关推荐
胡西风_foxww3 分钟前
【es6复习笔记】rest参数(7)
前端·笔记·es6·参数·rest
m0_748254884 分钟前
vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0
前端·vue.js·elementui
星就前端叭1 小时前
【开源】一款基于Vue3 + WebRTC + Node + SRS + FFmpeg搭建的直播间项目
前端·后端·开源·webrtc
m0_748234521 小时前
前端Vue3字体优化三部曲(webFont、font-spider、spa-font-spider-webpack-plugin)
前端·webpack·node.js
Web阿成1 小时前
3.学习webpack配置 尝试打包ts文件
前端·学习·webpack·typescript
噢,我明白了1 小时前
同源策略:为什么XMLHttpRequest不能跨域请求资源?
javascript·跨域
sanguine__2 小时前
APIs-day2
javascript·css·css3
苹果醋32 小时前
Golang的文件加密工具
运维·vue.js·spring boot·nginx·课程设计
jwensh2 小时前
【Jenkins】Declarative和Scripted两种脚本模式有什么具体的区别
运维·前端·jenkins
关你西红柿子2 小时前
小程序app封装公用顶部筛选区uv-drop-down
前端·javascript·vue.js·小程序·uv