本文的目标
以更加清晰的结构和逻辑让我们更好的理解Vue双向绑定的原理实现:
1、理解Vue的双向绑定代码实现逻辑;
2、理解data数据为何必须要以函数形式定义;
3、理解为何可以直接以 this.xxx 访问,属性、方法、data、props;
4、理解 vue.delete()实现原理;
5、理解生命周期函数执行的时机;
6、理解为何vue的监听会消耗大量的内存;
7、以直观 “树” 的方式理解Vue双向绑定源码,或以树的视角观察领悟世间万物;
引言
茫茫宇宙,浩瀚星辰,世间万物大多我们都可以用一颗树来表示他们之间的从属关系。
大到宇宙小到原子列举身边所见的一切事物,都可以用一颗树来与别人产生联系,比如:
1、宇宙-河外星系-银河系-太阳系等等,可以用一颗树来表示;
2、我们学习的知识,数学,物理,生物,语言等都会分门别类,用一颗树来表示他们的关系;
3、国家的权利机构,公司的组织架构,等等,世界的一切似乎都可以用一颗树来描述;
4、计算机有一种特别的数据结构 “树”;
先来看看 一颗树的样子:
抽象下变成程序员熟悉的样子:
树结构数据有2种遍历方法:
深度优先遍历 (DFS)
DFS 会沿特定路径遍历到叶子结点再回溯 (backtracking) 进入临近路径继续遍历。
最简单,我们最常用的实现方式就是,函数递归调用遍历树结构数据。
其实现的本质原理是,栈结构数据,后进先出。
我们使用一个数组也很容易模拟一个栈。
广度优先搜索 (BFS)
BFS :按照结点深度逐层遍历树结构。
一层一层的遍历树的节点,其代码实现,使用队列数据结构,先进先出。
1 -> 2、5 -> 3 、4->6、7 用数组很容易实现队列。
Vue双向绑定的原理实现
经过分析,我们发现,Vue程序的执行,就像一颗树一样,于是,我们可以把程序里面的一个函数看成一个节点,把他们构建成一颗树的结构,让我们能够更加清晰的看到源码的程序结构,对代码的结构,逻辑理解更加清晰。
先看看源码目录结构:
下面是把Vue源码的核心代码和函数看成一个节点描述出来的大体双向绑定结构图:
mindmaster地址: Vue双向绑定核心代码函数关系
我们发现,JS代码的执行,就像一颗树的深度遍历,那是因为,单线程的JS函数执行环境是一个栈环境结构的,后进先出。
源码的复杂度很高,细节很多,先看看这个 从零实现一个VUE,深入了解vue实现原理 有助于我们理解双向绑定原理。
由于理解有限,难免错误,还请多多指教。