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

news2025/1/24 15:47:22

睡觉。

---------------------------------------------------------------------------------------------------------------------------------

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.让我们使用一个简单的例子来实现。

<!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中对应的属性