2025/1/21 学习Vue的第四天

睡觉。


11.Object.defineProperty

1.在我们之前学习JS的时候,普通得定义一个对象与属性。

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回顾object.defineProperty方法</title>
</head>
<body>
    <script>
        let Person = {
            name:'张三',
            sex:'男',
            age:18
        }

        console.log(Person)
    </script>
</body>
</html>

我们会发现能够正常输出

2.如果我们想在此写法的对象外面添加属性,应该如何书写?

复制代码
 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回顾object.defineProperty方法</title>
</head>
<body>
    <script>
        let Person = {
            name:'张三',
            sex:'男',
            age:18    
        }

        Object.defineProperty(Person,'address',{
            value:'黄冈'
        })
        console.log(Object.keys(Person))
    </script>
</body>
</html>

打开控制台我们会发现:额外添加的address属性,不能参与遍历

3.得到对象一系列属性的方法是:

复制代码
console.log(Object.keys(Person))

并不能得到address属性

4.让我们试着书写遍历的代码看看能不能遍历得到address。使用for in

复制代码
    for(var key in Person){
            console.log(Person[key])
        }

我们发现并没有得到address的值,这说明我们不能控制额外添加的属性值

那么如何控制额外添加的属性呢?

5.如何控制,使得额外添加属性可修改可遍历可删除

复制代码
   Object.defineProperty(Person,'address',{
            value:'黄冈',
           enumerable:true,//控制属性是否可以枚举
          writable:true,//控制属性是否可以被修改
          configurable:true//控制属性是否可以被删除
        })

6.将额外的属性定义在Object外面,再由Object.defineProperty修改

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>回顾object.defineProperty方法</title>
</head>
<body>
    <script>
        var add ='武汉'
        let Person = {
            name:'李四',
            sex:'男',
            age:18    
        }

        Object.defineProperty(Person,'address',{
        //     value:'黄冈',
        //    enumerable:true,//控制属性是否可以枚举
        //   writable:true,//控制属性是否可以被修改
        //   configurable:true//控制属性是否可以被删除
        get(){
            console.log('有人读取了')
            return add
        },
        set(){
            console.log('有人修改了')
            return add
        }
        })
        // for(var key in Person){
        //     console.log(Person[key])
        // }

        console.log(Person)
        // console.log(Object.keys(Person))

    </script>
</body>
</html>

12.理解数据代理

通过一个对象代理,对另一个对象中属性的操作

1.让我们使用一个简单的例子来实现。

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>理解数据代理</title>
</head>
<body>
    <script>
   let A={
    name1:'苏高阳'
   }
   let B={
    name2:'赵丽颖'
   }
   Object.defineProperty(A,'name2',{
    get(){
        console.log('读取B')
        return B.name2
        },
    set(value){
        console.log('修改A')
        A.name1=value

    }
   })
    </script>
</body>
</html>

2.我们发现通过Object.defineproperty传入一个对象,传入其他对象的属性,可以改变两个对象的属性。

加深了我们对于数据代理的理解。

13.Vue中的数据代理

1.Vue中的数据代理:

通过vm对象来代理data对象中属性的操作(读写)

2.Vue中数据代理的好处:

更加方便的操作data中的数据

3.基本原理:

通过Object.defineProperty()把 data对象中所有属性添加到vm上。

为每一个添加到vm上的属性,都指定一个getter/setter

在getter/setter内部去操作(读/写)data中对应的属性

相关推荐
浮游本尊9 分钟前
React 18.x 学习计划 - 第五天:React状态管理
前端·学习·react.js
baole96327 分钟前
YOLOv4简单基础学习
学习·yolo·目标跟踪
Pluchon1 小时前
硅基计划5.0 MySQL 叁 E-R关系图&联合/多表查询&三大连接&子查询&合并查询
开发语言·数据库·学习·mysql
学工科的皮皮志^_^1 小时前
网口学习理解
经验分享·笔记·嵌入式硬件·学习·fpga开发·以太网
后端小张3 小时前
【鸿蒙开发手册】重生之我要学习鸿蒙HarmonyOS开发
开发语言·学习·华为·架构·harmonyos·鸿蒙·鸿蒙系统
.NET修仙日记4 小时前
.NET WinForms + WPF 综合学习路线:从传统到现代的.NET桌面开发
学习·c#·.net·wpf·.net core·winforms
crary,记忆5 小时前
MFE: React + Angular 混合demo
前端·javascript·学习·react.js·angular·angular.js
Yupureki5 小时前
从零开始的C++学习生活 11:二叉搜索树全面解析
c语言·数据结构·c++·学习·visual studio
电子云与长程纠缠5 小时前
Blender入门学习02
学习·blender
再睡一夏就好6 小时前
【C++闯关笔记】STL:deque与priority_queue的学习和使用
java·数据结构·c++·笔记·学习·