但是我们通过方法，是不能修改key的值的
如果非要修改key的值，我们需要新增一个属性
// 控制属性是否可以被修改，默认false不允许 writable:true
这时候再来修改key的值，就没问题了
我们通过直接添加属性，可以随意修改删除属性，直接在控制台输入delete object.key
如果我们使用对象删除.就不能使用这种方式随意修改删除了.删除指令直接返回false，也就是失败
如果想要删掉，也需要新增一个配置项
// 控制属性是否可以被删除，默认false不允许 configurable:true
这些属性只是列出其中几个，完整代码如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>初始vue</title> <!-- 引入vue.js --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <script type="text/javascript"> // 定义一个对象 let person={ name:'张三', sex:'男' } // 给person对象新增一个age属性 Object.defineProperty(person,'age',{ value:'18', // 控制属性是否可以被枚举 默认false不允许 enumerable:true, // 控制属性是否可以被修改，默认false不允许 writable:true, // 控制属性是否可以被删除，默认false不允许 configurable:true }) console.log(person) </script> </body> </html>
defineProperty高级配置项
还是上面的例子，现在有一个新的需求，我们定义一个变量number,要求它的值就是age，并且age要随着number的值变化进行动态变化
想要实现这个需求，需要借助get(getter)函数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>初始vue</title> <!-- 引入vue.js --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <script type="text/javascript"> // 定义一个属性，要求person的age必须要跟着这个变量进行变化 let number=11100 // 定义一个对象 let person={ name:'张三', sex:'男', age:number } // 给person对象新增一个age属性 Object.defineProperty(person,'age',{ // value:'18', // // 控制属性是否可以被枚举 默认false不允许 // enumerable:true, // // 控制属性是否可以被修改，默认false不允许 // writable:true, // // 控制属性是否可以被删除，默认false不允许 // configurable:true // get函数什么时候被调用？ // 当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值 get:function(){ return number } }) console.log(person) </script> </body> </html>
查看浏览器，需要点击三个点才能获取到数据
如果我们想修改数据也是没问题的，会随着修改的属性值进行动态获取变化
既然有get,那么就有set
当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
我们验证下,可以通过set去修改数据进行动态变化并且get读取数据
理解数据代理
我们写一段代码简单理解数据代理
简单来说，数据代理就是：通过一个对象代理另一个对象中属性的操作（读/写）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>初始vue</title> <!-- 引入vue.js --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 数据代理：通过一个对象代理另一个对象中属性的操作（读/写） --> <script type="text/javascript"> let a={x:100} let b={y:200} Object.defineProperty(b,'x',{ get(){ return a.x }, set(value){ a.x=value } }) </script> </body> </html>
浏览器测试
vue的数据代理
首先做一个简单的数据绑定
通过vm可以访问到name和address，说明data是被代理的
总结
1 vue中的数据代理
通过vm对象来代理data对象中属性的操作(读/写)
2 vue中的数据代理的好处
更加方便的操作data中的数据
3 基本原理
通过Object.defineProperty()把data对线中所有属性添加到vm上
为每一个添加到vm上的属性，都准备一个getter/setter方法
在getter/setter内部去操作(读/写)data中对应的属性
