理解Vue中的数据代理

首先我们要问一自己一个问题：为什么在控制台中修改了数据，再次获取的时候，又能够获取到我们所修改的值，vue是如何检测到的？
这就是数据代理帮我们去实现的。
数据代理理解：当我们把一个普通的 JavaScript 对象传入 Vue 实例，Vue 将遍历此对象中的data对象所有的属性，并使用 Object.defineProperty 为这些属性添加getter/setter方法，以便于我们获取或者设置属性值时vue能够时刻的检测到。
下面为一个普通的对象添加get，set方法代码如下：

 			let age=18;
            let person={
                name:'jack',
                sex:'男',
                // age:18,
            }

            // 用该方法添加的数据不能枚举（就是不能遍历的意思）
            Object.defineProperty(person,'age',{
                //get方法
                get(){
                    console.log('读取了age属性');
                    return age;
                },
                //set方法
                set(value){
                    console.log('有人修改了age属性,值变成了'+value);
                    //将value值重新赋值给number
                    age=value
                }
            })
            console.log(person);

调试结果如下：

这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 data中的属性被访问和修改时通知变更。

以上全是个人对数据代理的理解，欢迎大家纠正和补充~