07-Vue核心-数据代理
回顾Object.defineproperty方法
Object.defineproperty方法的作用就是直接在一个对象上定义一个新属性,或者修改一个已经存在的属性
写法:Object.defineproperty(obj, prop, desc)
1) 第一个参数obj,在哪个对象身上添加或者修改属性
2) 第二个参数prop,添加或修改的属性名
3) 第三个参数desc,配置项
通过Object.defineproperty方法添加的新属性,默认是不可枚举的,也就是说对象中的该属性无法被遍历出来
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>回顾Object.defineproperty</title> </head> <body> <script type="text/javascript"> // 声明对象类型变量 let person = { name:"马铃薯", sex:"男" } // Object.defineproperty方法的作用就是直接在一个对象上定义一个新属性,或者修改一个已经存在的属性 Object.defineProperty(person,"age",{ value:26 }) console.log(person) for(let index in person){ console.log("@",person[index]) } </script> </body> </html>
通过修改enumerable、writable、configurable属性值,可以分别控制属性是否可以被枚举、被修改以及被删除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>回顾Object.defineproperty</title> </head> <body> <script type="text/javascript"> // 声明对象类型变量 let person = { name:"马铃薯", sex:"男" } // Object.defineproperty方法的作用就是直接在一个对象上定义一个新属性,或者修改一个已经存在的属性 Object.defineProperty(person,"age",{ value:26, // 控制属性是否可以枚举,默认值为false enumerable:true, // 控制属性是否可以被修改,默认值为false writable:true, // 控制属性是否可以被删除,默认值为false configurable:true }) console.log(person) for(let index in person){ console.log("@",person[index]) } </script> </body> </html>
声明一个数值类型变量number,通过Object.defineproperty方法获取和修改number值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>回顾Object.defineproperty</title> </head> <body> <script type="text/javascript"> // 声明数值类型变量 let number = 100 // 声明对象类型变量 let person = { name:"马铃薯", sex:"男" } // Object.defineproperty方法的作用就是直接在一个对象上定义一个新属性,或者修改一个已经存在的属性 Object.defineProperty(person,"age",{ // value:26, // // 控制属性是否可以枚举,默认值为false // enumerable:true, // // 控制属性是否可以被修改,默认值为false // writable:true, // // 控制属性是否可以被删除,默认值为false // configurable:true, // 当有人读取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) for(let index in person){ console.log("@",person[index]) } </script> </body> </html>
数据代理
通过一个对象代理对另一个对象中属性的操作(读/写)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 数据代理:通过一个对象代理对另一个对象中属性的操作(读/写) --> <script type="text/javascript"> // 声明对象类型变量 let obj1 = {x:100} let obj2 = {y:200} // Object.defineproperty方法的作用就是直接在一个对象上定义一个新属性,或者修改一个已经存在的属性 Object.defineProperty(obj2,"x",{ get(){ return obj1.x }, set(value){ obj1.x = value } }) </script> </body> </html>
Vue中的数据代理
Vue中的数据代理通过 vm对象 来代理 data对象 中属性的操作(读/写)
Vue中数据代理的好处,是可以更加方便的操作data中的数据
Vue数据代理的基本原理
1) vm._data首先是从data对象里面获取的数据(注意,这里面还没有涉及到数据代理)
2) 但是我们操作属性时,一直使用_data.name和_data.address会显得很繁琐,因此这里通过Object.defineproperty方法把data对象里面的name和address属性添加到vm实例对象上,然后为每一个添加的属性指定get()和set()方法,在get()和set()内部去操作(读/写)data对象的属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue中的数据代理</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器 --> <div id="root"> <h2>学校名称:{{name}}</h2> <h2>学校地址:{{address}}</h2> </div> <script type="text/javascript"> // 阻止 vue 在启动时生成生产提示 Vue.config.productionTip = false //声明一个对象类型变量data,也就是 let data = { name:"尚硅谷", address:"宏福科技园" } const vm = new Vue({ el:"#root", // data:{ // name:"尚硅谷", // address:"宏福科技园" // } data }) </script> </body> </html>