官方文档：
    当你把一个普通的JavaScript对象传入Vue实例作为data选项，Vue将遍历此对象所有的属性，并使用Object.defineProperty把这些属性全部转为getter/setter。这些getter/setter对用户来说是不可见的，但是内部它们让Vue能够追踪依赖，在属性被访问和修改时通知变更。

    所以Vue2.x的数据响应式是通过 Object.defineProperty 对数据进行劫持，同时结合观察者模式
    Object.defineProperty 示例

    1. <!-- Vue2.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.     <script>
    14.       // 模拟Vue实例 data 数据
    15.       let data = {
    16.         msg: '响应式数据',
    17.         count: 0
    18.       }
    19.       // 模拟Vue实例
    20.       let vm = {};
    22.       function defineProperty (data) {
    23.         //data对象枚举自身属性，并返回数组
    24.         Object.keys(data).forEach(key => {
    25.           Object.defineProperty(vm,key,{
    26.             // 可枚举(可以遍历)
    27.             enumerable: true,
    28.             // 可配置(可以使用delete 删除, 可以使用)
    29.             configurable: true,
    30.             // 获取值执行
    31.             get() {
    32.               console.log('getter:', data[key])
    33.               return data[key]
    34.             },
    35.             // 更新值时执行
    36.             set(newValue) {
    37.               console.log('setter:', data[key])
    38.               if(data[key] === newValue) {
    39.                 return ;
    40.               }
    41.               data[key] = newValue
    42.               document.querySelector("#app").textContent=newValue;
    43.             }
    44.           })
    45.         })
    46.       }
    47.       //将data 传入自定义函数中，将每一条属性赋予响应式
    48.       defineProperty(data)
    50.       vm.msg = 'Hello响应式'
    52.       console.log(vm.msg);
    53.     </script>
    54. </body>
    55. </html>