第一章 Vue核心 第六节 数据代理
6.1 回顾Object.defineProperty方法
代码示例：
let number = 21;
let person = {
name:'retrace',
sex:'female'
}
//给对象添加属性
Object.defineProperty(person,'age',{//此方法添加的属性默认不可枚举
// value:number,
// enumerable:true, //控制属性是否可以枚举，默认值是false
// writable:true, //控制属性是否可以被修改，默认值是false
// configurable:true, //控制属性是否可以被删除，默认值是false
//当有人读取person的age属性时，get函数就会被调用，且返回值就是age的值
get:function (){ //可简写为 get(){}
console.log('有人获取了age属性');
return number;
},
//当有人修改person的age属性时，set函数就会被调用，且会收到修改的具体值
set:function (value){ //可简写为 set(value){}
console.log('有人修改了age属性，且值是',value);
number = value;
}
});
console.log(person);
const vm = new Vue({
el:'#root',
data:{
name: 'retrace',
sex:'female',
age:21
}
});
6.2 何为数据代理
数据代理：通过一个对象代理另一个对象中的属性的操作（读/写）
模拟数据代理：
let obj = {x:100};
let obj2 = {y:200};
Object.defineProperty(obj2,'x',{
get(){
return obj.x;
},
set(value){
obj.x = value;
}
});
6.3 Vue中的数据代理
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"> <title>Vue中的数据代理</title> <!--引入Vue--> <script src="../lib/vue.js"></script> </head> <body> <!--准备好一个容器--> <div id="root"> <h1>姓名：{{name}}</h1> <h1>年龄：{{age}}</h1> </div> <script type="text/javascript"> Vue.config.productionTip = false; let data = { name:'retrace', age:21 } const vm = new Vue({ el:'#root', data }); console.log(vm); </script> </body> </html>
本文作者：何以之
本文链接：https://www.cnblogs.com/serendipity-echo/articles/15407878.html
版权声明：本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步