VUE框架Vue3下使用基于Proxy的reactive函数实现对象的响应式处理与对象的子对象和数组响应式处理------VUE框架

<template>
    <h1>{{ userProxy.name }}</h1>
    <h1>{{ userProxy.age }}</h1>
    <h1>{{ userProxy.counter }}</h1>
    <h1>{{ userProxy.addr.city }}</h1>
    <h1>{{ userProxy.addr.street }}</h1>
    <h2>{{ num }}</h2>
    <h1>{{ userProxy.sex }}</h1>
    <h1>选课列表</h1>
    <ul>
        <li v-for="course in userProxy.courses" :key="course[course]">{{ course }}</li>
    </ul>
    <button @click="modifyUser()">修改</button>
    <button @click="addSex()">添加性别</button>
    <button @click="delSex()">删除性别</button>
    <button @click="changeCourse()">修改课程</button>
</template>

<script>
import { reactive, ref } from 'vue'
export default {
    name : "App",
    setup(){
        // ref主要用于基本数据类型
        // reactive专门用于对象类型,不能用于基本数据类型
        let userProxy = reactive({
            name : "Jack",
            age : 20,
            counter : 100,
            // 对象里面的对象也可以基于这个实现响应式处理
            addr : {
                city : "北京",
                street : "大兴区凉水河街道"
            },
            courses : ["语文","数学","英语"]
        });
        let num = ref(10000);
        // 基本数据类型是完全不可以使用reactive来做响应式处理的
        console.log(userProxy);
        // 如果是基本数据类型想做响应式处理,还是要使用ref函数来处理
        function modifyUser(){
            // 这里我们用reactive直接就是响应式的,不需要对这个代理对象的value进行修改
            // 这个函数可以直接以代理的方式去实现响应式处理
            userProxy.name = "Rose";
            userProxy.age = 30;
            userProxy.counter = 200;
            userProxy.addr.city = "南京";
            userProxy.addr.street = "雨花石街";
            userProxy.sex = "女";
        }
        function addSex(){
            // 添加性别
            userProxy.sex = "男";
        }
        function delSex(){
            // 删除性别
            delete userProxy.sex;
        }
        function changeCourse(){
            userProxy.courses[2] = "政治";
        }
        return {userProxy,num,modifyUser,addSex,delSex,changeCourse};
    }
}
</script>

<style>

</style>

<template>

    <h1>{{ userProxy.name }}</h1>

    <h1>{{ userProxy.age }}</h1>

    <h1>{{ userProxy.counter }}</h1>

    <h1>{{ userProxy.addr.city }}</h1>

    <h1>{{ userProxy.addr.street }}</h1>

    <h2>{{ num }}</h2>

    <h1>{{ userProxy.sex }}</h1>

    <h1>选课列表</h1>

    <ul>

        <li v-for="course in userProxy.courses" :key="course[course]">{{ course }}</li>

    </ul>

    <button @click="modifyUser()">修改</button>

    <button @click="addSex()">添加性别</button>

    <button @click="delSex()">删除性别</button>

    <button @click="changeCourse()">修改课程</button>

</template>

<script>

import { reactive, ref } from 'vue'

export default {

    name : "App",

    setup(){

        // ref主要用于基本数据类型

        // reactive专门用于对象类型,不能用于基本数据类型

        let userProxy = reactive({

            name : "Jack",

            age : 20,

            counter : 100,

            // 对象里面的对象也可以基于这个实现响应式处理

            addr : {

                city : "北京",

                street : "大兴区凉水河街道"

            },

            courses : ["语文","数学","英语"]

        });

        let num = ref(10000);

        // 基本数据类型是完全不可以使用reactive来做响应式处理的

        console.log(userProxy);

        // 如果是基本数据类型想做响应式处理,还是要使用ref函数来处理

        function modifyUser(){

            // 这里我们用reactive直接就是响应式的,不需要对这个代理对象的value进行修改

            // 这个函数可以直接以代理的方式去实现响应式处理

            userProxy.name = "Rose";

            userProxy.age = 30;

            userProxy.counter = 200;

            userProxy.addr.city = "南京";

            userProxy.addr.street = "雨花石街";

            userProxy.sex = "女";

        }

        function addSex(){

            // 添加性别

            userProxy.sex = "男";

        }

        function delSex(){

            // 删除性别

            delete userProxy.sex;

        }

        function changeCourse(){

            userProxy.courses[2] = "政治";

        }

        return {userProxy,num,modifyUser,addSex,delSex,changeCourse};

    }

}

</script>

<style>

</style>