Vue中的数据代理

最新推荐文章于 2024-04-04 17:52:02 发布

xiaoDream-

最新推荐文章于 2024-04-04 17:52:02 发布

阅读量1k

点赞数

文章标签：前端 vue

本文链接：https://blog.csdn.net/qq_41392076/article/details/123766055

版权

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>简单数据代理</title>
</head>
<!-- 
    需求:先定义两个对象obj,obj1
        我想通过修改obj1的值,obj的值跟着改变
 -->
<body>
    <script>
        let obj = {
            name:'张三',
            sex:'男',
            age:18
        }
        let obj1 = {
            name:'李四',
            sex:'男'
        }

        Object.defineProperty(obj1,'age',{
            get() {
                // 拿到obj的age属性的值
                console.log('get方法被调用,属性值被读取');
                return obj.age; 
            },
            set(value) {
                obj.age = value;
                console.log('set方法被调用属性值被修改具体值',value);
            }
        })
        console.log(obj1);
    </script>
</body>
</html>

1.Vue中的数据代理:

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

2.Vue中数据代理好处:

更加方便操作data中的数据

3.基本原理

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

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

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

代码如下:

<!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">
    <script src="./js/vue.js"></script>
    <title>Vue 数据代理</title>
</head>
<div id="root">
    <p>姓名:{{name}}</p>
    <p>年龄:{{age}}</p>
</div>
<body>
    <script>
        const vm =  new Vue({
            el:'#root',
            data:{
             name:'张三',
             age:18
          }
        })
        console.log(vm);

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

xiaoDream-

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中的数据代理

1.简单数据代理:通过一个对象代理对另一个对象中的属性的进行操作(读/写)代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport"...
复制链接

扫一扫