Vue3.x核心是Proxy。两者从代码层面相比，Proxy要更加简洁，原因是Proxy是直接监听对象，而defineProperty是监听每个对象里的属性。Proxy是ES6新增的，IE浏览器不支持 

    1. <!-- Vue3.x 数据响应式原理 -->
    2. <!DOCTYPE html>
    3. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>数据响应式</title>
    8. </head>
    9. <body>
    10.     <div id="app">
    11.       Hello Vue
    12.     </div>
    13.     <!--Vue 3.x 数据响应式原理  Proxy 代理-->
    14.    <script>
    15.       // 模拟Vue实例 data 数据
    16.       let data = {
    17.         msg: '响应式数据',
    18.         count: 0
    19.       }
    20.       // 模拟Vue实例
    21.       let vm = new Proxy(data, {
    22.         //执行代理行为的函数
    23.         //当访问vm的成员会执行
    24.         //target其实就是我们的代理对象data
    25.         get(target,key){
    26.           console.log('getter:',key ,'-----',target[key])
    27.           return target[key]
    28.         },
    29.         set(target,key,newValue) {
    30.           console.log('setter:',key ,'-----',target[key])
    31.           if(target[key] === newValue){
    32.             return;
    33.           }
    34.           target[key] = newValue
    35.           document.querySelector('#app').textContent = target[key]
    36.         }
    37.       })
    39.       vm.msg = 'Hello响应式'
    41.       console.log(vm.msg);
    42.     </script>
    43. </body>
    44. </html>

    Proxy实现数据响应式原理要比defineProperty简便，而且Proxy是直接面向整个对象的属性，而defineProperty对一个对象的多个属性都实现数据响应式，则要循环使用Object.defineProperty