继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【金秋打卡】第24天 6-6 如何理解ref toRef 和 toRefs

浪里个浪小白龙
关注TA
已关注
手记 75
粉丝 3
获赞 4

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

课程讲师: 双越

课程内容:
如何理解ref toRef 和 toRefs

课程收获:

toRefs将响应式对象变成普通对象后,每一个属性都具有响应式ref,此时需要使用 .value才能获取其值

<template>
    <p>ref demo {{ageRef}} {{state.name}}</p>
</template>

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

export default {
    name: 'Ref',
    setup() {
        const ageRef = ref(20) // 值类型 响应式
        const nameRef = ref('双越')

        const state = reactive({
            name: nameRef
        })

        setTimeout(() => {
            console.log('ageRef', ageRef.value)

            ageRef.value = 25 // .value 修改值
            nameRef.value = '双越A'
        }, 1500);

        return {
            ageRef,
            state
        }
    }
}
</script>

图片描述

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

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP