Vue setter/getter 是何原理？
1 、 defineProperty 重定义对象
JS原生es5版本提供对象重新定义的接口 defineProperty
defineProperty 可以修改对象的访问器属性，对象属性值发生变化前后可以触发回调函数。
对象的访问器属性包括 2 种类型：数据描述符、 存取描述符
1.1 数据描述符
value：对象key的值，默认是 空字符串 ''
writeable：是否可写，默认 true
configurable：true是否可配置，默认 true
enumerable：true是否可枚举， 默认 true
Object.getOwnPropertyDescriptors(obj); { k:{ configurable: true, enumerable: true, value: 90, writable: true } }
1.2 存取描述符
set:function(){}属性访问器 进行写操作时调用该方法
get:function(){}属性访问器 进行读操作时调用该方法
属性描述符： configurable 、enumerable
configurable 、enumerable、 set 、 get
对象中新增key的value发生变化时会经过set和get方法。
var obj = {};
var temp = ''; Object.defineProperty(obj, 'name', { configurable: true, enumerable: true, get: function () { return temp; }, set: function (newValue) { temp = newValue } }); // 需要维护一个可访问的变量 temp
或写在 obj对象内，如下：
var obj = {
tempValue: 'duyi',
get name () {
return this.tempValue;
},
set name (newValue) {
this.tempValue = newValue;
}
};
obj.name = 10;
console.log( obj.name ); // 10
小结一次：到这里来基本上知道 getter setter是可以实现的，基于这个简单理论作出一个复杂逻辑。
2 、Observer 源码
/** * Observer类方法将对象修改为可被观察。 * 一旦应用了这个类方法, 对象的每一个key会被转换成 getter/setter * 用于收集依赖项和触发更新。 */ var Observer = function Observer (value) { this.value = value; // 保存被观察的值到方法的实例属性 this.dep = new Dep(); // 建立一个Dep实例 this.vmCount = 0; // vmCount 记录vm结构的个数 def(value, '__ob__', this); // value 对象 增加 ‘__ob__’ key，并赋值 this if (Array.isArray(value)) { // value 对象如果是数组 if (hasProto) { // 表示在[]上可以使用 __proto__
protoAugment(value, arrayMethods); // 将arrayMethods 添加到value的__proto__。arrayMethods 好像是重写了数组的一部分原生方法，后面再看 } else { copyAugment(value, arrayMethods, arrayKeys); // 说不定他不支持 __proto__ ，调用def方法增强对象。 } this.observeArray(value); // 然后将这个增强后的数组，每一项都执行observe } else { this.walk(value); // walk 在Observer的原型上，对象转换为 getter setter。 } }; /** * 遍历所有属性将它们转换为 getter/setter，仅当值类型为对象时调用。 */ Observer.prototype.walk = function walk (obj) { var keys = Object.keys(obj); for (var i = 0; i < keys.length; i++) { defineReactive$$1(obj, keys[i]); // defineReactive$$1 () 方法，这个方法才是实现 getter / setter 的原方法！！！ } }; /** * 观察数组项列表 */ Observer.prototype.observeArray = function observeArray (items) { for (var i = 0, l = items.length; i < l; i++) { observe(items[i]); // observe 方法 } }; /** * 截获原型链使用 __proto__ 的方式来 * 增强一个目标的对象或数组，简称原型增强。 */ function protoAugment (target, src) { /* eslint-disable no-proto */ target.__proto__ = src; /* eslint-enable no-proto */ } /** * 增加对象原型properties */ function copyAugment (target, src, keys) { for (var i = 0, l = keys.length; i < l; i++) { var key = keys[i]; def(target, key, src[key]); } } /**
* 在Observer方法的原型属性 observerArray 上有用到！
* 大概意思是创建可观察实例，返回可观察实例或已有的可观察对象。 */ function observe (value, asRootData) {
// 如果不是object时，或是 VNode 的实例不进行 observe if (!isObject(value) || value instanceof VNode) { return } var ob; if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) { ob = value.__ob__; } else if ( shouldObserve && !isServerRendering() && (Array.isArray(value) || isPlainObject(value)) && Object.isExtensible(value) && !value._isVue ) { ob = new Observer(value); } if (asRootData && ob) { ob.vmCount++; } return ob } /** * 这里是实现getter setter的关键代码
* 这里是实现getter setter的关键代码
* 这里是实现getter setter的关键代码
*
* 在对象上定义一个 有反应的原型
* 传参：obj对象，key关键字，val值，customSetter在set的时候会被执行（第4个参数），shallow 默认为undefined，为 true 时不执行 observe 函数。
*/
function defineReactive$$1 ( obj, key, val, customSetter, shallow ) { var dep = new Dep(); var property = Object.getOwnPropertyDescriptor(obj, key); if (property && property.configurable === false) { return } // 预定义的getter和setter var getter = property && property.get; var setter = property && property.set; if ((!getter || setter) && arguments.length === 2) { val = obj[key]; } var childOb = !shallow && observe(val); Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter () { var value = getter ? getter.call(obj) : val; if (Dep.target) { dep.depend(); if (childOb) { childOb.dep.depend(); if (Array.isArray(value)) { dependArray(value); } } } return value }, set: function reactiveSetter (newVal) { var value = getter ? getter.call(obj) : val; /* eslint-disable no-self-compare */ if (newVal === value || (newVal !== newVal && value !== value)) { return } /* eslint-enable no-self-compare */ if (customSetter) { customSetter(); } // #7981: for accessor properties without setter if (getter && !setter) { return } if (setter) { setter.call(obj, newVal); } else { val = newVal; } childOb = !shallow && observe(newVal); dep.notify(); } }); }
订阅observe对象的变化，通知触发update，参考订阅-发布模式。
/** * Dep 是可以有多个指令订阅的可观察对象，目的就是对一个目标深层处理 */ var uid = 0; var Dep = function Dep () { this.id = uid++; // 添加了2个实例属性，id 用于排序和 subs 数组统计sub this.subs = []; }; // 在 subs中添加 sub Dep.prototype.addSub = function addSub (sub) { this.subs.push(sub); }; // 从 subs中移除 sub Dep.prototype.removeSub = function removeSub (sub) { remove(this.subs, sub); }; Dep.prototype.depend = function depend () { if (Dep.target) { Dep.target.addDep(this); // addDep 是 Watcher 的原型方法，用于指令增加依赖 } }; Dep.prototype.notify = function notify () { // 稳定订阅列表 var subs = this.subs.slice(); if (!config.async) { // 如果不是在异步运行，在程序调度中 subs 不可以被排序！ // 然后排序以确保正确的顺序。 subs.sort(function (a, b) { return a.id - b.id; }); } for (var i = 0, l = subs.length; i < l; i++) { // 然后顺序触发 Watcher 原型的 update 方法 subs[i].update(); } }; // 当前目标程序被评估，这个评估全局唯一，一次只要一个观察者可以被评估 Dep.target = null; var targetStack = []; // 将目标程序推送到目标栈 function pushTarget (target) { targetStack.push(target); Dep.target = target; } // 执行出栈先去掉 function popTarget () { targetStack.pop(); Dep.target = targetStack[targetStack.length - 1]; }
全局def方法，定义对象。
// def 方法比较简单 /** * 定义一个原型 * obj * key 对象的key关键字 * val 对象的value值 * 是否可枚举，默认可写可配置 */ function def (obj, key, val, enumerable) { Object.defineProperty(obj, key, { value: val, enumerable: !!enumerable, writable: true, configurable: true }); }
