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

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

课程章节：6-7 toRef和toRefs如何使用）

课程讲师： 双越

课程内容：
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有了新的认识，期待后边的学习