20.数据代理.html 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Document</title>
  7. </head>
  8. <body>
  9. <div id="app">
  10. <!--
  11. 通过一个对象可以去代理另一个对象
  12. 并且 可以修改 其属性
  13. Object.definProperty()
  14. getter 劫持数据
  15. setter 修改数据
  16. -->
  17. </div>
  18. <script src="./vue.js"> </script>
  19. <script>
  20. let obj = {
  21. name: "雪王",
  22. sex: "男"
  23. }
  24. // Object.defineProperty(obj,"sex",{
  25. // value:"女"
  26. // })
  27. let number = 10
  28. Object.defineProperty(obj, "age", {
  29. get() {
  30. console.log("看")
  31. return number;
  32. },
  33. set(value) {
  34. console.log("新")
  35. number = value
  36. }
  37. })
  38. setTimeout(() => {
  39. obj.age = 100;
  40. console.log(obj, 'obj2')
  41. }, 3000)
  42. console.log(obj, 'obj')
  43. </script>
  44. </body>
  45. </html>