Vue双向绑定的源码树结构分析

本文的目标

以更加清晰的结构和逻辑让我们更好的理解Vue双向绑定的原理实现:

1、理解Vue的双向绑定代码实现逻辑;
2、理解data数据为何必须要以函数形式定义;
3、理解为何可以直接以 this.xxx 访问,属性、方法、data、props;
4、理解 vue.set(),vue.delete()实现原理;
5、理解生命周期函数执行的时机;
6、理解为何vue的监听会消耗大量的内存;
7、以直观 “树” 的方式理解Vue双向绑定源码,或以树的视角观察领悟世间万物;

引言

茫茫宇宙,浩瀚星辰,世间万物大多我们都可以用一颗树来表示他们之间的从属关系。
大到宇宙小到原子列举身边所见的一切事物,都可以用一颗树来与别人产生联系,比如:
1、宇宙-河外星系-银河系-太阳系等等,可以用一颗树来表示;
2、我们学习的知识,数学,物理,生物,语言等都会分门别类,用一颗树来表示他们的关系;
3、国家的权利机构,公司的组织架构,等等,世界的一切似乎都可以用一颗树来描述;
4、计算机有一种特别的数据结构 “树”;

先来看看 一颗树的样子:


tree.jpg

抽象下变成程序员熟悉的样子:


abstractTree.jpg
树结构数据有2种遍历方法:
深度优先遍历 (DFS)

DFS 会沿特定路径遍历到叶子结点再回溯 (backtracking) 进入临近路径继续遍历。
最简单,我们最常用的实现方式就是,函数递归调用遍历树结构数据。
其实现的本质原理是,栈结构数据,后进先出。
我们使用一个数组也很容易模拟一个栈。


datastack.jpg
广度优先搜索 (BFS)

BFS :按照结点深度逐层遍历树结构。
一层一层的遍历树的节点,其代码实现,使用队列数据结构,先进先出。
1 -> 2、5 -> 3 、4->6、7 用数组很容易实现队列。

Vue双向绑定的原理实现

经过分析,我们发现,Vue程序的执行,就像一颗树一样,于是,我们可以把程序里面的一个函数看成一个节点,把他们构建成一颗树的结构,让我们能够更加清晰的看到源码的程序结构,对代码的结构,逻辑理解更加清晰。
先看看源码目录结构:


vue.png

下面是把Vue源码的核心代码和函数看成一个节点描述出来的大体双向绑定结构图:

mindmaster地址: Vue双向绑定核心代码函数关系
Vue双向绑定核心代码函数关系 .png
我们发现,JS代码的执行,就像一颗树的深度遍历,那是因为,单线程的JS函数执行环境是一个栈环境结构的,后进先出。

源码的复杂度很高,细节很多,先看看这个 从零实现一个VUE,深入了解vue实现原理 有助于我们理解双向绑定原理。

由于理解有限,难免错误,还请多多指教。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,132评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,802评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,566评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,858评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,867评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,695评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,064评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,705评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,915评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,677评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,796评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,432评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,041评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,992评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,223评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,185评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,535评论 2 343