笔记

reactive 响应，反应

Vue3 在处理 对象的响应式时，使用的是 Proxy 。

reactive 的目的： 让原对象变为响应式的对象。

视频内容

• 作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
• 语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
• reactive定义的响应式数据是“深层次的”。
• 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。

源码

App.vue

<template>
    <h1>一个人的信息</h1>

    <!-- 模板中，不需要使用.value 取其属性值 -->
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <!-- 通过对象 -->
    <h2>姓名：{{p.name}}</h2>
    <h2>年龄：{{p.age}}</h2>

    <h3>工作种类：{{job.type}}</h3>
    <h3>工作薪水：{{job.salary}}</h3>

    <h3>测试的数据c: {{job_reactive.a.b.c}}</h3>

    <h3>爱好：{{hobby}}</h3>

    <button @click="changeInfo">修改人的信息</button>
</template>

<script>
    //引入 ref()
    import {reactive, ref} from 'vue'

    export default {
        name: 'App',

        setup(){
            //此处定义，不是 响应式数据
            //let name = '张三'
            //let age = 18
            //如果想定义为响应式数据,需要借助 ref()函数 将其变为 可以被 Vue 监测到的 响应式数据。
            //数据
            let name = ref('张三')
            let age = ref(18)
            //如果想把上面的 name age 使用 reactive ，需要将其包装为 对象：
            let person = {
                name: '张三',
                age: 18
            }
            let p = reactive(person) //加工后给 p

            //Vue3 中 ref() 对 对象类型,使用 Proxy()(∈js ES6自带) 加工。
            let job = ref({
                type:'前端工程师',
                salary:'30K'
            })

            let job_reactive = reactive({
                type:'前端工程师',
                salary:'30K',

                a:{
                        b:{
                            c:666
                        }
                    }
            })

            //测试 reactive 是否可以加工 数组
            let hobby = ['抽烟','喝酒','洗脚']

            //测试是否可以直接将 基本类型 加工为 响应式:
            //let number = reactive(666)
            //提示警告:
            //    [Vue warn] value cannot be made reactive: 666
            //结论:
            //  基本类型 不能使用 reactive() 加工为 响应式。

            //方法
            function changeInfo(){

                //通过此处可以看到上面通过 ref() 加工后的 name 是一个对象。
                //    RefImpl = Reference(引用) Implement(实现)
                //    记住： 通过 ref() 加工后的对象叫： 引用实现的实例对象（简称：引用对象）！
                //console.log(name)

                //Vue3 操作属性,需要使用 .value 。因为此时的 name 是一个引用对象。
                //name.value = '李四'
                // age.value = 48

                console.log("job=", job)                    //可以看到 ref() 加工后的对象为 RefImpl
                //你用 Ref() 就要用 .value
                console.log("job.value=", job.value)
                //记住:    从对象中取东西，需要.value，如果后面还要取东西，就不需要.value了。        
                job.value.type = 'UI设计师'
                job.value.salary = '60K'
                console.log("job.value.type=",job.value.type)
                console.log("job.value.salary=",job.value.salary)

                console.log("job_reactive=", job_reactive)    //可以看到 reactive() 加工后的对象为 Proxy
                //如果想改数据: 不用.value
                job_reactive.type = 'softool.cn'
                job_reactive.salary = '70K'
                job_reactive.a.b.c = 999
                console.log("job_reactive.type=",job_reactive.type)
                console.log("job_reactive.salary=",job_reactive.salary)

                //在 Vue2 中 不能通过索引直接修改数组元素，但是在 Vue3 就可以了(因为 Vue2 中使用的 defineProperty, Vue3 使用的是 Proxy)：
                hobby[0] = '学习'

                //
                p.name = '李四'
                p.age = 19
            }

            //返回一个对象（常用）  返回之后，才能在上面的模板中使用
            return {
                name,
                age,
                job,

                    job_reactive,
                    hobby,
                    p,

                changeInfo
            }
        }
    }
</script>