复习笔记（二）Vue数据代理

最新推荐文章于 2024-03-07 16:59:05 发布

9 216

最新推荐文章于 2024-03-07 16:59:05 发布

阅读量78

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/YJYH_/article/details/122317893

版权

文章目录

一、Object.defineProperty
二、什么是数据代理
- 1.简单的数据代理例子
- 2.Vue中的数据代理
总结

一、Object.defineProperty

Vue底层很多地方都用到了Object.defineProperty，比如说数据劫持、数据代理、计算属性。
由字面意思可得：这个方法是给对象添加属性用的。
Object.defineProperty需要传三个参数：
第一个参数：给哪个对象添加属性
第二个参数：添加的属性叫什么名
第三个参数：配置项，配置项中可以有一些属性，如
value:20,
enumerable:true, //控制属性是否可以枚举(遍历)，默认值false
writable:true, //控制属性是否可以被修改，默认值false
configurable:true, //控制属性是否可以被删除，默认值false
上一段代码：

<!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=18;
        let person={
            name:'小明',
            sex:'男'
        }
        // 需要传三个参数：
        //第一个参数：给哪个对象添加属性
        //第二个参数：添加的属性叫什么名
        //第三个参数：配置项
        Object.defineProperty(person,'age',{
            // value:20,
            // enumerable:true,  //控制属性是否可以枚举(遍历)，默认值false
            // writable:true, //控制属性是否可以被修改，默认值false
            // configurable:true, //控制属性是否可以被删除，默认值false

            //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
            get(){
                console.log("有人读取age属性了");
                return number;
            },

            //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
            set(value){
                console.log("有人修改age属性了,值是"+value);
                number=value;
            },
        })
        console.log(person);

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

在这里插入图片描述

二、什么是数据代理

1.简单的数据代理例子

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

<!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>Document</title>
</head>
<body>
    <script type="text/javascript">
        let obj = {x:100}
        let obj2 = {y:200}

        Object.defineProperty(obj2,'x',{
            get(){
                return obj.x;
            },
            set(value){
                obj.x=value
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

2.Vue中的数据代理

<!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>Document</title>
    <script type="text/javascript" src="../js/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:'xx大学',
                address:'HLJ'
            }
        })
       
</script>
</html>

在这里插入图片描述

总结

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

9 216

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复习笔记（二）Vue数据代理

文章目录一、Object.defineProperty二、什么是数据代理1.简单的数据代理例子2.Vue中的数据代理总结一、Object.definePropertyVue底层很多地方都用到了Object.defineProperty，比如说数据劫持、数据代理、计算属性。由字面意思可得：这个方法是给对象添加属性用的。Object.defineProperty需要传三个参数：第一个参数：给哪个对象添加属性第二个参数：添加的属性叫什么名第三个参数：配置项，配置项中可以有一些属性，如value:
复制链接

扫一扫