.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 = 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 = 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)的更多相关文章
- Vue源码解析---数据的双向绑定
本文主要抽离Vue源码中数据双向绑定的核心代码,解析Vue是如何实现数据的双向绑定 核心思想是ES5的Object.defineProperty()和发布-订阅模式 整体结构 改造Vue实例中的dat ...
- .3-Vue源码之数据劫持(1)
写了一半关机了,又得重新写,好气. 上一节讲到initData函数,其中包含格式化.代理.监听. // Line-3011 function initData(vm) { var data = vm. ...
- [Vue源码]一起来学Vue双向绑定原理-数据劫持和发布订阅
有一段时间没有更新技术博文了,因为这段时间埋下头来看Vue源码了.本文我们一起通过学习双向绑定原理来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫 ...
- vue源码之响应式数据
分析vue是如何实现数据响应的. 前记 现在回顾一下看数据响应的原因. 之前看了vuex和vue-i18n的源码, 他们都有自己内部的vm, 也就是vue实例. 使用的都是vue的响应式数据特性及$w ...
- vue 快速入门 系列 —— 侦测数据的变化 - [vue 源码分析]
其他章节请看: vue 快速入门 系列 侦测数据的变化 - [vue 源码分析] 本文将 vue 中与数据侦测相关的源码摘了出来,配合上文(侦测数据的变化 - [基本实现]) 一起来分析一下 vue ...
- Vue源码解析之数组变异
力有不逮的对象 众所周知,在 Vue 中,直接修改对象属性的值无法触发响应式.当你直接修改了对象属性的值,你会发现,只有数据改了,但是页面内容并没有改变. 这是什么原因? 原因在于: Vue 的响应式 ...
- Vue框架核心之数据劫持
本文来自网易云社区. 前瞻 当前前端界空前繁荣,各种框架横空出世,包括各类mvvm框架横行霸道,比如Angular.Regular.Vue.React等等,它们最大的优点就是可以实现数据绑定,再也不需 ...
- Vue源码--解读vue响应式原理
原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...
- 【Vuejs】350- 学习 Vue 源码的必要知识储备
前言 我最近在写 Vue 进阶的内容.在这个过程中,有些人问我看 Vue 源码需要有哪些准备吗?所以也就有了这篇计划之外的文章. 当你想学习 Vue 源码的时候,需要有扎实的 JavaScript 基 ...
随机推荐
- weblogic-部署web应用
1, weblogic 安装介质的获取: oracle 官方weblogic下载 : http://www.oracle.com/technetwork/middleware/weblogic/d ...
- python 集合的操作
list_1 = set([1,2,3,4,5])#print(list_1,type(list_1))list_2 = set([1,2,3,6,7,8,9,10])#print(list_2,ty ...
- input type="hidden" js获取不到值(document.getelementbyid OR $(#).val())
<head> <input type="hidden" name="aplStatus" id="aplStatus" v ...
- Apache Spark 2.2.0 中文文档 - Submitting Applications | ApacheCN
Submitting Applications 在 script in Spark的 bin 目录中的spark-submit 脚本用与在集群上启动应用程序.它可以通过一个统一的接口使用所有 Spar ...
- ArrayList ConcurrentModificationException
1.ConcurrentModificationException ConcurrentModificationException 出现在使用 ForEach遍历,迭代器遍历的同时,进行删除,增加出现 ...
- 关于 HashTable
hashTable 的一些认识: 底层使用散列表,存贮键值对,键值非null 使用synchronize 保证线程安全 (线程安全) ■全局变量 //The hash table data. //底层 ...
- [bzoj1066] [SCOI2007] 蜥蜴 - 网络流
在一个r行c列的网格地图中有一些高度不同的石柱,一些石柱上站着一些蜥蜴,你的任务是让尽量多的蜥蜴逃到边界外. 每行每列中相邻石柱的距离为1,蜥蜴的跳跃距离是d,即蜥蜴可以跳到平面距离不超过d的任何一个 ...
- 移动APP测试方法总结
移动APP测试,除了基础功能测试测试方法外,需要额外关注以下方面: 兼容性测试 流量测试 电量测试 弱网络测试 稳定性测试 安全测试 环境相关测试 兼容性测试 针对App通常会考虑这些方面: 1.操作 ...
- pgpool-II主备流复制的架设
1.环境 OS: CentOS release 6.4 (Final) DB: postgresql 9.3.6 pgpool服务器: pgpool 172.16.0.240 数据库主服务器:mast ...
- __无标题栏的窗口拖动___javafx
遇到困难::添加mouseevent监听,我用的mouse_DragedDetected配合MouseEvent.Pressed,,闪的不行,后来借鉴swing的pressed,move,releas ...