持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情

实现数据的响应式—ref函数

1）.定义：定义⼀个响应式的数据

2）.使用：
（1）基本类型数据：
引⼊ ref 函数
创建⼀个包含响应式数据的引⽤对象（ref 对象）
操作数据
（2）对象类型数据
创建⼀个包含响应式数据的引⽤对象（ref 对象）
操作数据

3）注意：

• 可以处理基本类型数据、数组或者对象类型的数据
  
• 基本类型数据的响应式是通过 Object.defineProperty() 实现
  
• 对象类型数据的响应式是通过 ES6 中的 Proxy 实现

<template>
    <div>
     <h2>姓名：{{name}}</h2>
     <h2>年龄：{{age}}</h2>
     <h2>课程：{{obj.course}}</h2>
     <button @click="xd">打招呼</button>
     <button  @click="changePerson">切换人员</button>          
     <button  @click="changeCourse">切换课程</button>
    </div>
</template>

<script>
    import {ref} from 'vue'
    export default {
        name: "Reactive",
        props: {
            msg: String,
        },
        setup() {
            let name =ref("张三");
            let age =ref(18);

            let obj= ref({
                xd:'hahah',
                course:'vue3'
            });
            
            function xd(){
                alert(`你好，我是${name.value},今年${age.value}岁了`)
            }

            function changePerson(){
                (name.value='李四'),(age.value=19)
            }

            function changeCourse(){
                obj.value.course='react'
            }
            return{
                name,
                age,
                obj,
                xd,
                changePerson,
                changeCourse
            }

            }
    }
</script>

<style lang="scss" scoped>

</style>

实现数据的响应式—reactive函数

1.定义
定义⼀个 对象类型 的响应式数据（不能处理基本类型数据）
2.代码：

<template>
    <div>
     <h2>姓名：{{person.name}}</h2>
     <h2>年龄：{{person.age}}</h2>
     <h2>课程：{{person.obj.course}}</h2>
     <h2>爱好：{{person.list}}</h2>
     <button @click="miaozai">打招呼</button>
     <button  @click="changePerson">切换人员</button>
     <button  @click="changeCourse">切换课程</button>
     <button  @click="changeHobby">切换爱好</button>
    </div>
</template>

<script>
    import {reactive} from 'vue'
    export default {
        name: "Reactive",
        props: {
            msg: String,
        },
        setup() {
            // 如果数据对象比较多的话，可以用一个对象包裹
            let person = reactive({
              name:'zhangsan',
              age:30,
              obj:{
                miaozai:'dili',
                course:'vue3'
              },
              list:["吃饭", "睡觉", "敲代码"]
            })

            // let name =ref("张三");
            // let age =ref(18);

            // let obj= reactive({
            //     miaozai:'hahah',
            //     course:'vue3'
            // });

            // let list = reactive(["吃饭", "睡觉", "敲代码"]);
            // console.log(obj.val)
            
            function miaozai(){
                alert(`你好，我是${person.name},今年${person.age}岁了`)
            }

            function changePerson(){
                (person.name='李四'),(person.age=19)
            }

            function changeCourse(){
                person.obj.course='react'
            }
 
            function changeHobby(){
                person.list[3] = "打游戏"
            }


            return{
                person,
                // name,
                // age,
                // obj,
                //  list,

                miaozai,
                changePerson,
                changeCourse,
                changeHobby
            }

            }
    }
</script>

<style lang="scss" scoped>

</style>

3.reactive 和 ref 不同点

• 处理数据类型不同： ref 可以处理基本类型和对象（数组）类型数据， reactive 只能处理对象（数组）类型数据。
• 实现原理不同： ref 处理基本类型数据通过Object.defineProperty()实现， reactive 通过Proxy 实现。
• 操作不同：ref 操作数据需要加 .value。
• 组件数据多时更加趋向使⽤ reactive