Vue解析总纲
上一节:防Vue系列-11 为防Vue系列-07添加响应式代码
在vue中可以通过this.age来获取age的值
- 接下我们将创建一个proxy函数作用数据代理
/**
*@params target:any (当前vue实例对象)
*@params data:String
*@params key:any
*/
// 中间代理proxy 将某个对象属性映射到另一个对象的属性上
function proxy(target, data, key) {
Object.defineProperty(target, key, {
enumerable: true,
configurable: true,
set(newVal) {
// this[data][age] = newVal
target[data][key] = newVal;
},
get() {
// 返回this[data][age]
return target[data][key];
},
});
}
接下来就在我们的Vue构造函数中添加
function Vue(options) {
// 内部数据使用_ 开头 ,只读数据$开头
this._data = options.data;
this._el = options.el;
//准备工作(模板)
this.$el = this._templateNode = document.querySelector(this._el); //获取挂载的对象
this._parent = this._templateNode.parentNode; //父节点
//将数据全部转成响应式的
deepProperty.call(this, this._data);
// proxy 属性代理
let keys = Object.keys(this.data);
for (let index = 0; index < keys.length; index++) {
// 代理方法;
proxy(this, "_data", keys[index]);
}
//挂载
this.mount();
}