（1）vue基础—— 1.7数据代理

2022-07-09 21:38:28 阅读：122 来源： 互联网

标签：1.7 age Object 代理 value person vue data 属性

1. 回顾Object.defineproperty方法

<body>
    <script type="text/javascript">
        let number = 18
        let person = {
            name:'张三',
            sex: '男',
            // age: 18
        }
 
        Object.defineProperty(person,'age',{
            // value:18,
            // enumerable:true, //控制属性是否可以枚举，默认值是false
            // writable:true, //控制属性是否可以被修改，默认值是false
            // configurable:true, //控制属性是否可以被删除，默认值是false
        
            //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
            get(){
                // return 'hello'
                console.log('有人读取age属性了');
                return number
            },
 
            //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
            set(value){
                console.log('有人修改了age属性，且值是',value);
                number = value
            }
        }) 
 
        // 遍历Object.keys 对象属性
        // console.log(Object.keys(person));
 
        console.log(person);
    </script>
    
</body>
</html><html>

2.何为数据代理

<body>
    <!-- 数据代理：通过一个对象代理另一个对象中属性的操作（读/写） -->
    <script type="text/javascript">
        let obj = {x:100}
        let obj2 = {y:200}
 
        Object.defineProperty(obj2,'x',{
            //有人通过obj2访问x的时候，返回的值是obj.x
            get(){
                return obj.x;
            },
            set(value){
                obj.x = value
            }
        })
    </script>
</body>
</html>

3.Vue中的数据代理

   1.Vue中的数据代理：

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

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

             更加方便的操作data中的数据
   3.基本原理：

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

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

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

<body>
    <!-- 
        1.Vue中的数据代理：
             通过vm对象来代理data对象中属性的操作（读/写）
        2.Vue中数据代理的好处：
             更加方便的操作data中的数据
        3.基本原理：
             通过Object.defineProperty()把data对象中所有属性添加到vm上。
             为每一个添加到vm上的属性，都指定一个getter/setter。
             在getter/setter内部去操作（读/写）data中对应的属性
     -->
 
    <!-- 准备好一个容器 -->
    <div id="root">
       <h2>学校名称：{{name}}</h2>
       <h2>学校地址：{{address}}</h2>
    </div>
    <script type="text/javascript">
        Vue.config.production = true; // 阻止 vue 在启动时生成生产提示。
        let data = {
            name:'尚硅谷',
            address:'宏福科技园'
        }
        const vm = new Vue({
            el:"#root",
            data: {
                name:'尚硅谷',
                address:'宏福科技园'
            }
        })
    </script>
</body>
</html>

标签：1.7,age,Object,代理,value,person,vue,data,属性
来源： https://www.cnblogs.com/chenxiaomeng/p/16461900.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

（1）vue基础—— 1.7数据代理

1. 回顾Object.defineproperty方法

2.何为数据代理

3.Vue中的数据代理