为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【金秋打卡】第25天 6-7...

【金秋打卡】第25天 6-7 toRef和toRefs如何使用

2022.11.17 22:10 152浏览

课程名称:前端框架及项目面试 聚焦Vue3/React/Webpack

课程讲师: 双越

课程内容:
toRef和toRefs如何使用

课程收获:

如果使用toRef将某个对象中的属性变成响应式数据,修改响应式数据是会影响到原始数据的。但是需要注意,如果修改通过toRef创建的响应式数据,并不会触发UI界面的更新。
所以,toRef的本质是引用,与原始数据有关联

<template>
    <p>toRefs demo {{age}} {{name}}</p>
</template>

<script>
import { ref, toRef, toRefs, reactive } from 'vue'

export default {
    name: 'ToRefs',
    setup() {
        const state = reactive({
            age: 20,
            name: '双越'
        })

        const stateAsRefs = toRefs(state) // 将响应式对象,变成普通对象

        // const { age: ageRef, name: nameRef } = stateAsRefs // 每个属性,都是 ref 对象
        // return {
        //     ageRef,
        //     nameRef
        // }

        setTimeout(() => {
            state.age = 25
        }, 1500)

        return stateAsRefs
    }
}
</script>

图片描述

谢谢老师,讲的非常细致,很容易懂。这一节学的是ref toRef 和 toRefs的使用,给以后的学习打下了基础。
原来vue3能有这么多种性质,以及对vue有了新的认识,期待后边的学习

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
1
获赞与收藏
4

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消