笔记

toRef

把一个 xxx 东西 变为 另外一个 xxx 东西。

视频内容

toRef

  • 作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。
  • 语法：const name = toRef(person,'name')
  • 应用: 要将响应式对象中的某个属性单独提供给外部使用时。
  • 扩展：toRefs 与toRef功能一致，但可以批量创建多个 ref 对象，语法：toRefs(person)

源码

Demo.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        let person = {
            name: '张三',
            age: 18
        }

        let p = new Proxy(person, {
            set(target, propName, value){
                console.log(`${propName}被修改了，我要去更新界面了！`)

                // target[propName] = value
                Reflect.set(target, propName, value)
            }
        })

        //演示: 在控制台修改 name, 并不会修改 p.name
        let name = p.name
    </script>
</body>
</html>

Demo.vue

<template>
    <!-- 展示 person对象的所有属性的信息 -->
    <h4>{{person}}</h4>

    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <h2>薪资：{{job.j1.salary}}K</h2>

    <button @click="name+='~'">修改姓名</button>
    <button @click="age++">增长年龄</button>
    <button @click="job.j1.salary++">涨薪</button>
</template>

<script>
    import {ref,reactive,toRef,toRefs} from 'vue'
    export default {
        name: 'Demo',
        setup(){
            //数据
            let person = reactive({
                name:'张三',
                age:18,
                job:{
                    j1:{
                        salary:20
                    }
                }
            })


            //此处仅仅是将 person.name 的值 给了 name1
            // const name1 = person.name
            // console.log('%%%',name1)

            //将 person对象中的 name 属性 调整为 RefImpl响应式对象。 我的理解: name2 作为指针,指向了原person.name 。 
            //如果使用: const name2 = Ref(person.name) ，那么此时是将 person.name 实例化为新的RefImpl对象 。
            //    第0个参数: 对象
            //    第1个参数: 对象中属性名,用 单引号 括起来
            // const name2 = toRef(person,'name')
            // console.log('####',name2)

            const x = toRefs(person)
            console.log('******',x)

            //返回一个对象（常用）
            return {
                person,

                // name:toRef(person,'name'),
                // age:toRef(person,'age'),
                // salary:toRef(person.job.j1,'salary'),
                //
                //toRef() 一次只能处理一个
                //toRefs() 一次可以处理多个。 它返回一个对象。 使用 ... 来将返回的对象逐一展开为上面3行(只能展开到第0层,不会展开子元素 E.g 只展开到person.job,并不会展开person.job的下一级)。
                ...toRefs(person)
            }
        }
    }
</script>