1. <body>
    2.     <script>
    3.         // vue2 的数据绑定原理: ES5原生语法的 Object.defineProperty
    4.         var obj = {}
    5.         Object.defineProperty(obj, "age", {
    6.             get(){
    7.                 if(this.tempAge){
    8.                     return this.tempAge
    9.                 }else{
    10.                     return 10
    11.                 }
    12.             },
    13.             set(value){
    14.                 this.tempAge = value
    15.                 // 在set中数据更新后,调用虚拟DOM更新视图
    16.             }
    17.         })
    18.         console.log(1, obj)
    19.         console.log(2, obj.age)
    20.         obj.age = 20;
    21.         console.log(3, obj.age)
    24.         // vue3 的数据绑定原理: ES6原生语法的 new Proxy() 代理对象
    25.         var obj2 = {age: 30, name: '张三'}
    26.         var proxyObj = new Proxy(obj2, {
    27.             get(target, prop){
    28.                 // 参数一是原始对象obj2, 参数二是获取的字段名age
    29.                 console.log(target, prop)
    30.                 // return "myage"
    31.                 return target[prop]
    32.             },
    33.             set(target, prop, value){
    34.                 target[prop] = value
    35.                 // 在set中数据更新后,调用虚拟DOM更新视图
    36.             }
    37.         })
    38.         console.log(4, proxyObj)
    39.         console.log(4, proxyObj.age, proxyObj.name)
    40.         proxyObj.age = 40;
    41.         proxyObj.name = '李四'
    42.         console.log(5, proxyObj.age, proxyObj.name)
    46.     </script>
    47. </body>