VUE框架回顾Vue2中使用Object.defineProperty方法实现响应式的缺陷------VUE框架

旧约Alatus

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

阅读量375

点赞数 5

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

于 2023-12-21 14:38:05 首次发布

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

版权

前端同时被 2 个专栏收录

329 篇文章 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>
        // 创建一个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>

user1
{name: 'Jack'}
user2
{}name: "Jack"get name: ƒ get()set name: ƒ set(value)[[Prototype]]: Object
01.html:20 get方法执行了
user2.name
01.html:20 get方法执行了
'Jack'
user2.name
01.html:20 get方法执行了
'Jack'
user2.name="Rose"
01.html:27 页面更新了
'Rose'
user2
{}name: "Rose"get name: ƒ get()set name: ƒ set(value)[[Prototype]]: Object
01.html:20 get方法执行了
user2.age=30
30
user1.age
undefined
delete user2.age
true
user2
{}name: (...)get name: ƒ get()set name: ƒ set(value)[[Prototype]]: Object
user1
{name: 'Jack'}
user2
{}name: "Jack"get name: ƒ get()set name: ƒ set(value)[[Prototype]]: Object
01.html:20 get方法执行了
user2.name
01.html:20 get方法执行了
'Jack'
user2.name
01.html:20 get方法执行了
'Jack'
user2.name="Rose"
01.html:27 页面更新了
'Rose'
user2
{}name: "Rose"get name: ƒ get()set name: ƒ set(value)[[Prototype]]: Object
01.html:20 get方法执行了
user2.age=30
30
user1.age
undefined
delete user2.age
true
user2
{}name: (...)get name: ƒ get()set name: ƒ set(value)[[Prototype]]: Object

旧约Alatus

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
VUE框架回顾Vue2中使用Object.defineProperty方法实现响应式的缺陷------VUE框架

VUE框架回顾Vue2中使用Object.defineProperty方法实现响应式的缺陷------VUE框架
复制链接

扫一扫