【Vue源码】虚拟DOM和diff算法

参考笔记：
https://blog.csdn.net/weixin_44972008/article/details/115620198

虚拟dom

定义：

所谓虚拟DOM，就是用一个JS对象来描述一个DOM节点

为什么要有虚拟dom？

因为真实的dom节点很大很复杂，操作起来非常耗性能，为了提高浏览器性能，需要尽可能少的操作真实dom，因此需要虚拟dom，只更新需要更新的视图。故需要用JS模拟出一个DOM节点，称之为虚拟DOM节点。当数据发生变化时，我们对比变化前后的虚拟DOM节点，通过DOM-Diff算法计算出需要更新的地方，然后去更新需要更新的视图。

作用：

我们在视图渲染之前，把写好的template模板先编译成VNode并缓存下来，等到数据发生变化页面需要重新渲染的时候，我们把数据发生变化后生成的VNode与前一次缓存下来的VNode进行对比，找出差异，然后有差异的VNode对应的真实DOM节点就是需要重新渲染的节点，最后根据有差异的VNode创建出真实的DOM节点再插入到视图中，最终完成一次视图更新。

patch

以新的VNode为基准，改造旧的oldVNode使之成为跟新的VNode一样，这就是patch过程要干的事。