weixin_44040492的博客

VNode最大的用途就是在数据变化前后生成真实DOM对应的虚拟DOM节点，然后就可以对比新旧两份VNode，找出差异所在，然后更新有差异的DOM节点，最终达到以最少操作真实DOM更新视图的目的。而对比新旧两份VNode并找出差异的过程就是所谓的DOM-Diff过程。DOM-Diff算法是整个虚拟DOM的核心所在。

我们在视图渲染之前，把写好的template模板先编译成VNode并缓存下来，等到数据发生变化页面需要重新渲染的时候，我们把数据发生变化后生成的VNode与前一次缓存下来的VNode进行对比，找出差异，然后有差异的VNode对应的真实DOM节点就是需要重新渲染的节点，最后根据有差异的VNode创建出真实的DOM节点再插入到视图中，最终完成一次试图更新。从上方代码可以看出，克隆节点就是把已有节点的属性全部复制到新节点中，而现有节点和新克隆得到的节点之间唯一不同的就是克隆得到的节点isCloned为true。

div class="a" id="b">我是内容</div>tag:'div',//元素边沁啊attr:{ //属性id:'b'},text:'我是内容',//文本内容children:[] //子元素我们把组成一个DOM节点必要的东西通过一个js对象表示出来，那么这个JS对象就可以用来描述这个DOM节点，我们把这个js对象就称为是这个真实DOM节点的虚拟DOM节点。

以前我们说过，对于数组变化侦测是通过拦截器实现的，也就是说只要通过数组原型上的方法对数组进行操作就可以侦测到，但是别忘了，我们在日常开发中，还可以通过数组的下标来操作数据。上面所讲的Array型数据变化侦测仅仅说的是数组自身变化的侦测，比如给数组新增一个元素或删除一个元素，而在VUE中，不论是Object型数据还是Array型数据所实现的数据侦测都是深度侦测，所谓深度侦测就是不但要侦测数据自身的变化，还要侦测数据中所有子数据的变化。我们只需对这三种方法分别处理，拿到新增的元素，再将其转化即可。

Array所使用的侦测方法与Object不同，这是因为对于Object数据我们使用的时JS提供的对象原型上的方法Object.defineProperty，而这个方法是对象原型上的，所以Array无法使用这个方法，所以我们需要对Array型数据设计一套另外的变化侦测机制，当然设计思路是一样的，根本上还是在获取数据时收集依赖，数据变化时通知以来更新。拦截器生效后，当数组数据再发生变化时，我们就可以在拦截器中通知变化了，也就是我们就可以知道数组数据何时发生变化了。

当数据变得可观测后，我们就能知道数据什么时候发生变化，那么当数据发生变化的时候，我们去通知视图更新就好了。那么问题来了，我们如何知道该更新哪一个视图呢，不可能以为一个数据变化把整个视图都更新掉。方法就是谁依赖了这个数据就更新谁，通俗易懂的将就是给每个可观测的数据都建立一个依赖数组（因为一个数据可能会多次使用），谁用到了这个数据，就把谁放到这个数组中，当数据变化时，我们只需要将依赖数组中的依赖都通知一遍即可。

上方公式state(状态)是输入，UI(视图)是输出,render(渲染)是驱动state来改变UI的方法，当state发生变化时，输出也会跟着变化，我们把这种特性称之为数据驱动视图我们知道state和UI是用户规定的，而不变的是render(),所以VUE扮演的就是render()这个角色，VUE发现了state的变化，经过一系列的加工，最终反映在UI上，那么VUE是如何知道state的变化的呢，由此引出了变化侦测结论： 数据驱动视图就是状态变化引起了视图变化。