首页 > 代码库 > .4-Vue源码之数据双绑（2）
.4-Vue源码之数据双绑（2）
开播了开播了！
vue通过数据劫持来达到监听和操作DOM更新，上一节简述了数组变化是如何监听的，这一节先讲讲对象属性是如何劫持的。
// Line-855 Observer.prototype.walk = function walk(obj) { var keys = Object.keys(obj); for (var i = 0; i < keys.length; i++) { // Go! defineReactive$$1(obj, keys[i], obj[keys[i]]); } };
上一节说到这里，现在进入defineReactive$$1来看看具体的劫持过程，函数比较长。
函数接受4个参数，分别为数据对象、键、值、默认设置，由于这里只传了3个，先不管第4个
// Line-925 function defineReactive$$1( obj, key, val, customSetter ) { // 生成一个依赖管理 var dep = new Dep(); // getOwnPropertyDescriptor方法以对象形式返回键描述信息 // 包括enumerable、writable等等 var property = Object.getOwnPropertyDescriptor(obj, key); // 不可修改的键直接返回 if (property && property.configurable === false) { return } // 获取对应的getter与setter var getter = property && property.get; var setter = property && property.set; // 值为对象时的嵌套监听 // 当前值为‘Hello Vue‘的字符串 直接返回 var childOb = observe(val); Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter() { // 有getter方法直接调用 var value = http://www.mamicode.com/getter ? getter.call(obj) : val; // 这里暂时为null if (Dep.target) { dep.depend(); if (childOb) { childOb.dep.depend(); } if (Array.isArray(value)) { dependArray(value); } } // 直接返回值 return value }, set: function reactiveSetter(newVal) { // 获取当前值 var value = http://www.mamicode.com/getter ? getter.call(obj) : val; // 这是比较个啥 只有NaN才会不等于自身吧 if (newVal === value || (newVal !== newVal && value !== value)) { return } // 这个参数没传 暂时不知道干啥的 if ("development" !== ‘production‘ && customSetter) { customSetter(); } // 调用默认setter方法或将新值赋给当前值 if (setter) { setter.call(obj, newVal); } else { val = newVal; } // childOb = observe(newVal); // 广播变化 dep.notify(); } }); }
这里很多方法跳不进去，所以没法调试看效果，等这个搞完，做数据变化调试的时候再来详细解释，目前将就看一下。
由于value只有一个message键，所以一次就结束了，函数疯狂返回，然后回到了observe的构造函数：
// Line-900 function observe(value, asRootData) { if (!isObject(value)) { return } var ob; if (hasOwn(value, ‘__ob__‘) && value.__ob__ instanceof Observer) { ob = value.__ob__; } else if ( observerState.shouldConvert && !isServerRendering() && (Array.isArray(value) || isPlainObject(value)) && Object.isExtensible(value) && !value._isVue ) { // 跑完这里 ob = new Observer(value); } if (asRootData && ob) { ob.vmCount++; } return ob }
来看看搞了这么久，ob是个什么东西：
dep是依赖收集数据，包含计数id和依赖数组subs，还有4个原型方法。
value是被监听数据，除了数据本身，还添加了__ob__属性引用自身，自定义了get和set方法，计数的vmCount。
原型方法包含一个遍历数组数据的observeArray与监听对象的walk方法。
接下来的代码将vmCount加1，然后返回这个ob对象，返回到了initData函数：
// Line-3012 function initData(vm) { // ..格式化、代理 // ... // 监听数据 observe(data, true /* asRootData */ ); }
这个函数也到头了，返回到了initState函数：
// Line-2948 function initState(vm) { // ... // 从这里跳了出来 if (opts.data) { initData(vm); } else { observe(vm._data = {}, true /* asRootData */ ); } // 剩下的两个参数没有 if (opts.computed) { initComputed(vm, opts.computed); } if (opts.watch) { initWatch(vm, opts.watch); } }
好吧，这个也没啥执行的，返回到了最原始的_init初始化函数：
// Line-3924 Vue.prototype._init = function(options) { // ...各种初始化 // ... // 从这里跳出来 initState(vm); initProvide(vm); // resolve provide after data/props callHook(vm, ‘created‘); /* istanbul ignore if */ if ("development" !== ‘production‘ && config.performance && mark) { vm._name = formatComponentName(vm, false); mark(endTag); measure(((vm._name) + " init"), startTag, endTag); } if (vm.$options.el) { vm.$mount(vm.$options.el); } };
接下来是initProvide函数，provide翻译成中文是准备的意思。
// Line-3924 function initProvide(vm) { // 没有这个属性 跳 var provide = vm.$options.provide; if (provide) { vm._provided = typeof provide === ‘function‘ ? provide.call(vm) : provide; } }
然后调用钩子函数，进入created阶段，由于没有定义执行内容，所以直接跳出来，代码就不贴了。
那个dev内容也不太清楚记录的什么，暂时先不管，下面是双绑的另一个大模块：AST。
本节先简单结束了，数据劫持也差不多这些，下一节开始跑节点挂载。
上图：
.4-Vue源码之数据双绑（2）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。