VUE框架解析Vue3使用Proxy代理实现响应式的底层原理------VUE框架

旧约Alatus

已于 2023-12-25 14:17:52 修改

阅读量1.2k

点赞数 20

分类专栏： # VUE框架前端文章标签：前端 javascript ecmascript vue.js vue 前端框架 js

于 2023-12-21 15:21:59 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/135131936

版权

前端同时被 2 个专栏收录

350 篇文章 2 订阅

订阅专栏

VUE框架

250 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 这个是基于我们ES6的新语法,window.Proxy对象实现的
        // 通过Proxy创建的代理对象
        // 目标对象
        let user = {
            name : "Jack"
        };
        // 通过Proxy生成代理对象
        let userProxy = new Proxy(user,{
            // 主要是通过这些配置项实现响应式的
            // 当你读取的时候get执行
            get(target,propertyName){
                // target代表目标对象,propertyName代表目标上的某个属性
                console.log(target);
                console.log(propertyName);
                console.log(typeof propertyName);
                return target[propertyName];
            },
            // 当你修改某属性或新增某个属性的时候执行
            set(target,propertyName,value){
                // target代表目标对象,propertyName代表目标上的某个属性
                target[propertyName] = value;
            },
            // 当你删除某个属性的时候
            deleteProperty(target,propertyName){
                // target代表目标对象,propertyName代表目标上的某个属性
                // 必须要返回,不返回默认返回值就变成undefined了(false)
                return delete target[propertyName];
            }
        });
        // 代理模式的原理:通过代理对象完成目标对象的任务,同时还可以顺带新增一些程序
    </script>
</body>
</html>
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<script>

// 这个是基于我们ES6的新语法,window.Proxy对象实现的

// 通过Proxy创建的代理对象

// 目标对象

let user = {

name : "Jack"

};

// 通过Proxy生成代理对象

let userProxy = new Proxy(user,{

// 主要是通过这些配置项实现响应式的

// 当你读取的时候get执行

get(target,propertyName){

// target代表目标对象,propertyName代表目标上的某个属性

console.log(target);

console.log(propertyName);

console.log(typeof propertyName);

return target[propertyName];

},

// 当你修改某属性或新增某个属性的时候执行

set(target,propertyName,value){

// target代表目标对象,propertyName代表目标上的某个属性

target[propertyName] = value;

},

// 当你删除某个属性的时候

deleteProperty(target,propertyName){

// target代表目标对象,propertyName代表目标上的某个属性

// 必须要返回,不返回默认返回值就变成undefined了(false)

return delete target[propertyName];

}

});

// 代理模式的原理:通过代理对象完成目标对象的任务,同时还可以顺带新增一些程序

</script>

</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 创建一个user1对象
        let user1 = {
            name : "Jack"
        };
        // 创建一个user2对象
        let user2 = {};
        // 给user2扩展一个name属性
        Object.defineProperty(user2,"name",{
            // 数据代理
            get(){
                console.log("get方法执行了")
                return user1.name;
            },
            // 数据劫持
            set(value){
                // 改数据
                user1.name = value;
                console.log("页面更新了");
            }
        });
        // 成也萧何败也萧何
        // 这个会导致我们的属性新增或删除没有响应式处理
    </script>
</body>
</html>
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

</head>

<body>

<script>

// 创建一个user1对象

let user1 = {

name : "Jack"

};

// 创建一个user2对象

let user2 = {};

// 给user2扩展一个name属性

Object.defineProperty(user2,"name",{

// 数据代理

get(){

console.log("get方法执行了")

return user1.name;

},

// 数据劫持

set(value){

// 改数据

user1.name = value;

console.log("页面更新了");

}

});

// 成也萧何败也萧何

// 这个会导致我们的属性新增或删除没有响应式处理

</script>

</body>

</html>