数据代理

数据代理或者是称为映射

代理方法就是将 app._data 中的成员映射到 app上

! 注意：

​ 由于需要在更新数据的时候，更新页面内容，所以app._data 与 app 访问的成员应该是同一个

​ 对应的，是需要将 _data 变成响应式的

app.name 转化为 app._data.name
app.xxx 转化为 app._data.xxx 

为了解决上面的问题，在vue源码中引入了proxy(target,src,prop)函数

proxy(target,src,prop) Proxy() 是es6的语法

target: 类似与上面提到的 app

src: 类似与上面提到的 _data或者app._data

prop: 类似与上面提到的 xxx

demo

let o1 = {
    name:'zs'
}

/**
*   需求：当访问 o2.name 的时候，访问的是 o1 中的name
        类似于：输入的是  this.xxx ==> this._data.xxx    
*/
let o2 = {
    name:'ls'
};
// 映射就是类似与下面的这种操作实现的
Object.defineProperty(o2,'name',{ // 现在访问的目标是 o2  即需要访问的是：o2.name
    configurable: true,
    enumerable: true,
    get() {
        return o1.name;
    },
    set(newVal) {
        o1.name = newVal;
    }
});

在vue源码中是使用 一个名为 proxy 的函数，封装了上面的代码

function proxy(target,src,prop) {  
    Object.defineProperty(target,src,{
		configurable: true,
		enumerable: true,
		get() {
			return target[src][prop];
		},
		set(newVal) {
			target[src][prop] = newVal;
		}
	})
}