开播了开播了!

  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)的更多相关文章

  1. Vue源码解析---数据的双向绑定

    本文主要抽离Vue源码中数据双向绑定的核心代码,解析Vue是如何实现数据的双向绑定 核心思想是ES5的Object.defineProperty()和发布-订阅模式 整体结构 改造Vue实例中的dat ...

  2. .3-Vue源码之数据劫持(1)

    写了一半关机了,又得重新写,好气. 上一节讲到initData函数,其中包含格式化.代理.监听. // Line-3011 function initData(vm) { var data = vm. ...

  3. [Vue源码]一起来学Vue双向绑定原理-数据劫持和发布订阅

    有一段时间没有更新技术博文了,因为这段时间埋下头来看Vue源码了.本文我们一起通过学习双向绑定原理来分析Vue源码.预计接下来会围绕Vue源码来整理一些文章,如下. 一起来学Vue双向绑定原理-数据劫 ...

  4. vue源码之响应式数据

    分析vue是如何实现数据响应的. 前记 现在回顾一下看数据响应的原因. 之前看了vuex和vue-i18n的源码, 他们都有自己内部的vm, 也就是vue实例. 使用的都是vue的响应式数据特性及$w ...

  5. vue 快速入门 系列 —— 侦测数据的变化 - [vue 源码分析]

    其他章节请看: vue 快速入门 系列 侦测数据的变化 - [vue 源码分析] 本文将 vue 中与数据侦测相关的源码摘了出来,配合上文(侦测数据的变化 - [基本实现]) 一起来分析一下 vue ...

  6. Vue源码解析之数组变异

    力有不逮的对象 众所周知,在 Vue 中,直接修改对象属性的值无法触发响应式.当你直接修改了对象属性的值,你会发现,只有数据改了,但是页面内容并没有改变. 这是什么原因? 原因在于: Vue 的响应式 ...

  7. Vue框架核心之数据劫持

    本文来自网易云社区. 前瞻 当前前端界空前繁荣,各种框架横空出世,包括各类mvvm框架横行霸道,比如Angular.Regular.Vue.React等等,它们最大的优点就是可以实现数据绑定,再也不需 ...

  8. Vue源码--解读vue响应式原理

    原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...

  9. 【Vuejs】350- 学习 Vue 源码的必要知识储备

    前言 我最近在写 Vue 进阶的内容.在这个过程中,有些人问我看 Vue 源码需要有哪些准备吗?所以也就有了这篇计划之外的文章. 当你想学习 Vue 源码的时候,需要有扎实的 JavaScript 基 ...

随机推荐

  1. springmvc04-文件上传-JSON数据

    文件上传部分: 1, 导入commons-fileupload-1.2.2.jar commons-io-2.4.jar 两个jar包. 2, 在主配置文件中,添加如下信息 <!-- 文件上传- ...

  2. response对象的使用

    使用response对象提供的sendRedirect()方法可以将网页重定向到另一个页面.重定向操作支持将地址重定向到不同的主机上,这一点与转发是不同的.在客户端浏览器上将会得到跳转地址,并重新发送 ...

  3. ArcGIS连带文字注记导出为CAD格式

    可以使用ArcGIS的"Export To CAD"工具将点.线.面等要素直接导出为CAD格式.如果要连带将ArcGIS中的文字标注导出为CAD格式要稍麻烦一点,下面是一个例子. ...

  4. C++移动构造函数以及move语句简单介绍

    C++移动构造函数以及move语句简单介绍 首先看一个小例子: #include <iostream> #include <cstring> #include <cstd ...

  5. 【重点突破】——Cookie的使用

    cookie:小甜饼 cookie:保存客户端浏览器中一个纯文本文件 版本高的浏览器可查看   F12->Resource  左下方cookie    查看 cookie作用: 保存:[安全性要 ...

  6. webservice部署到服务器报错

    System.Net.WebException: 基础连接已经关闭: 发送时发生错误. ---> System.IO.IOException: 从传输流收到意外的 EOF 或 0 个字节. 在 ...

  7. CentOS7.3下部署Rsyslog+LogAnalyzer+MySQL中央日志服务器

    一.简介 1.LogAnalyzer 是一款syslog日志和其他网络事件数据的Web前端.它提供了对日志的简单浏览.搜索.基本分析和一些图表报告的功能.数据可以从数据库或一般的syslog文本文件中 ...

  8. Java面向对象 GUI 补录

     Java面向对象 GUI 补录 知识概要:(1)GUI和CLI                   (2)AWT和SWING                   (3)AWT继承关系图      ...

  9. 一些实用的JQuery代码片段收集(筛选,搜索,样式,清除默认值,多选等)

    //each遍历文本框 清空默认值 $(".maincenterul1").find("input,textarea").each(function () { ...

  10. WPF第三方控件Telerik

    帮助文档:http://www.telerik.com/help/wpf/gridview-selection-via-checkbox.html Telerik专注于微软.Net平台的表示层与内容管 ...