12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- </head>
- <body>
- <div id="app">
- <!-- 数据代理:
- Object.defineProperty()中getter和setter
- 通过一个对象可以去代理另一个对象 并且可以修改其属性
- -->
- </div>
- <script src="./vue.js"></script>
- <script>
- /**
- * 参数一:所要代理的对象
- * 参数二:所要代理的对象属性
- * 参数三:配置对象
- *
- */
- // let obj = {
- // name:"赵家锐",
- // age: 26,
- // sex:"男"
- // }
- // Object.defineProperty(obj,'sex',{
- // value: "女"
- // })
- // Object.defineProperty(obj,'age',{
- // value: 33
- // })
- // console.log(obj)
- let num = 10;
- let obj = {
- name: "雪怡",
- sex: "女"
- }
- Object.defineProperty(obj,'age',{
- get() {
- console.log("读取")
- return num;
- },
- set(value) {
- console.log("设置");
- num = value
- }
- })
- console.log(obj)
- console.log(obj.age)
- </script>
- </body>
- </html>
|