前端VUE3.0,DAY7，数据代理

最新推荐文章于 2022-07-14 00:02:55 发布

疯子的梦想＠

最新推荐文章于 2022-07-14 00:02:55 发布

阅读量126

点赞数

分类专栏：前端文章标签： javascript vue js

本文链接：https://blog.csdn.net/weixin_48681463/article/details/119378001

版权

前端专栏收录该内容

110 篇文章 4 订阅

订阅专栏

VUE3.0,DAY7

数据代理中的object.defineProperty方法

1.回归object.defineProperty方法。建好基本html文件以及代码。顾名思义就是给object对象define一个property属性。本来person中没有age这个属性，但是通过object选中person，然后给添加了一个新值value，并且打印出来此时的person变量内容。在浏览器按F12可看到，此时的person增加了age属性。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>object.defineProperty</title>
</head>

<body>
    <script type="text/javascript">
        let person = {
            name: '张三',
            sex: '男'
        }
        Object.defineProperty(person, 'age', { value: 18 })
        console.log(person)
    </script>

</body>

</html>

在这里插入图片描述
2.使用该方法定义的属性，可以在浏览器中修改。例如本来年龄是19，后边我令年龄等于20，然后在输出person内容，发现年龄改变为20.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>object.defineProperty</title>
</head>

<body>
    <script type="text/javascript">
        let person = {
            name: '张三',
            sex: '男'
        }
        Object.defineProperty(person, 'age', {
            value: 18,
            enumerable: true,//控制属性是否可以枚举，默认值是false
            writable: true//控制属性是否可以被修改
        })
        console.log(person)
    </script>

</body>

</html>

在这里插入图片描述
3.在网页中还可以直接对相关属性进行删除，需要代码中设置某个功能为true。将configurable的默认值改为true后，就可以了，可以看到，我们在网页中删除掉了person中name的值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>object.defineProperty</title>
</head>

<body>
    <script type="text/javascript">
        let person = {
            name: '张三',
            sex: '男'
        }
        Object.defineProperty(person, 'age', {
            value: 18,
            enumerable: true,//控制属性是否可以枚举，默认值是false
            writable: true,//控制属性是否可以被修改
            configurable: true//控制属性是否可以被删除，默认值是false
        })
        console.log(person)
    </script>

</body>

</html>

在这里插入图片描述
4.object.defineProperty的其他高级限制属性设置。我们建立了一个变量number储存age年龄的数值，然后在objectdefine内，使用一个get函数，在浏览器内当修改number的值时，object内的get就会被调用，返回number的值给person中的age。这里我们初值设为20，随后仅修改number为19，在打印输出person，发现age已经变为19.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>object.defineProperty</title>
</head>

<body>
    <script type="text/javascript">
        let number = 20
        let person = {
            name: '张三',
            sex: '男'
        }
        Object.defineProperty(person, 'age', {
            // value: 18,
            // enumerable: true,//控制属性是否可以枚举，默认值是false
            // writable: true,//控制属性是否可以被修改
            // configurable: true//控制属性是否可以被删除，默认值是false
            //当有人读取person的age属性时，get函数（getter）就会被调用，其返回值就是age的值。
            get: function () {
                return number
            }
        })
        console.log(person)
    </script>

</body>

</html>

在这里插入图片描述

何为数据代理

1.数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）。例如有个对象obj，有个属性x，有个对象叫obj2，通过obj2修改obj的属性x。在浏览器中输入修改obj2.x的值，obj中的x也变化了。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>何为数据代理</title>
</head>

<body>
    <!--数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）-->
    <script type="text/javascript">
        //let 设立一个对象
        let obj = { x: 100 }
        let obj2 = { y: 200 }
        //为obj2定义一个x属性
        Object.defineProperty(obj2, 'x', {
            get() {
                return obj.x
            },
            //如果有人要通过obj2修改x，那么obj.x的值设置为value
            set(value) {
                obj.x = value
            }
        })
    </script>
</body>

</html>

在这里插入图片描述

vue中的数据代理

1.使用vm接受vue实例，然后在网页中输出查看vm的所有内容，其中的_data就是vue中的data。取出data时，如果用vm.data则会提示未定义。所以要用_data。通过vm修改data中的name，最终vue实例中的data.name发生了改变。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>何为数据代理</title>
    <!--引入vue.js-->
    <script type="text/javascript" src="../vue.js"></script>
</head>

<body>
    <!--准备好一个容器-->
    <div id="root">
        <h1>学校名称：{{name}}</h1>
        <h1>学校地址：{{address}}</h1>
    </div>


</body>
<!--数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）-->
<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        data: {
            name: '哈哈',
            address: '123'
        }
    })
</script>

</html>

在这里插入图片描述

2.数据代理图示，引用“尚硅谷”机构的一张图。vue中的data被vm获得，在vm中表示为_data,修改vm中的_data，vue中的data就会被自动改变。

总结

1.Vue中的数据代理:通过vm对象来代理data对象中属性的操作(读/写)
2.Vue中数据代理的好处:更加方便的操作data中的数据
3.基本原理:通过0bject . defineProperty( )把data对象中所有属性添加到vm.上。
为每一个添加到vm 上的属性，都指定一个getter/setter.
在getter/setter内部去操作(读/写) data中对应的属性。