Vue源码分析-数据代理

淩亂°似流年 2022-12-04 09:26 108阅读 0赞

# 数据代理 #

<table> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:414.8pt;"> 实现data的数据代理 &nbsp; // 保存options到vm上 &nbsp; this.$options = options || {}; &nbsp; // 保存data数据到vm上 _data &nbsp; var data = this._data = this.$options.data; &nbsp; // 保存vm &nbsp; var me = this; &nbsp; // 数据代理 &nbsp; // 代理data属性数据到vm上 &nbsp; // 遍历data数据中所有属性名成一个数组 &nbsp; Object.keys(data).forEach(function (key) { &nbsp; &nbsp; // 进行数据代理 &nbsp; &nbsp; me._proxyData(key);&nbsp; 关于me:每个函数都有this,通过me保存this(vm实例对象) &nbsp; }); &nbsp; &nbsp; &nbsp; // 代理data属性到vm上 &nbsp; _proxyData: function (key, setter, getter) { &nbsp; &nbsp; var me = this;&nbsp; //this指向vm实例对象 &nbsp; &nbsp; setter = &nbsp; &nbsp; &nbsp; setter || &nbsp; &nbsp; &nbsp; Object.defineProperty(me, key, { &nbsp; &nbsp; &nbsp; &nbsp; configurable: false, // 不能重新配置 &nbsp; &nbsp; &nbsp; &nbsp; enumerable: true, // 可以被遍历 &nbsp; &nbsp; &nbsp; &nbsp; get: function proxyGetter() { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // 代理属性读操作 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return me._data[key]; // 返回原属性的值 &nbsp; &nbsp; &nbsp; &nbsp; }, &nbsp; &nbsp; &nbsp; &nbsp; set: function proxySetter(newVal) { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // 代理属性写操作 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; me._data[key] = newVal; // 设置原属性的值 &nbsp; &nbsp; &nbsp; &nbsp; }, &nbsp; &nbsp; &nbsp; }); &nbsp; }, </td> 
 </tr> 
 <tr> 
 <td style="vertical-align:top;width:414.8pt;"> 代理computed计算属性到vm上 &nbsp; this._initComputed(); &nbsp; &nbsp; _initComputed: function () { &nbsp; &nbsp; var me = this; //vm实例对象 &nbsp; &nbsp; // 获取computed对象 &nbsp; &nbsp; var computed = this.$options.computed; &nbsp; &nbsp; if (typeof computed === "object") { &nbsp; &nbsp; &nbsp; Object.keys(computed).forEach(function (key) { &nbsp; &nbsp; &nbsp; &nbsp; // 数据代理 &nbsp; &nbsp; &nbsp; &nbsp; Object.defineProperty(me, key, { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; get: &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; typeof computed[key] === "function" &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ? computed[key] &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : computed[key].get, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // 计算属性不需要设置，计算属性当里面的值发生变化会自动更新 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; set: function () {}, &nbsp; &nbsp; &nbsp; &nbsp; }); &nbsp; &nbsp; &nbsp; }); &nbsp; &nbsp; } &nbsp; }, &nbsp; </td> 
 </tr> 
 </tbody> 
</table>

**       在创建mvvm实例对象的时候会传入一个option配置对象,在mvvm构造函数中把当前的配置对象保存到$options,把配置对象中的data保存在实例对象\_data和变量data中,通过Object.keys()方法获取到data对象中的所有属性,并且遍历调用\_proxyData方法实现数据代理,该方法内部通过Object.defineProperty方法将data中每个属性的值逐一添加到vm实例身上,并且重写了get和set方法,在外部通过vm.msg获取该属性值的时候,会将vm.\_data对应的msg进行返回,外部设置vm.msg值的时候,进入set方法,修改vm.\_data对应msg的值**

**       代理配置对象中data的值后,会通过调用\_initComputed方法将配置对象的computed属性代理到data中,也是通过Object.definePrototype方法,若代理属性的值是一个函数,将次函数作为get方法,若对应的是一个对象,对象身上的get对应的值作为此代理属性的get方法**