【VUE】怎么实现虚拟dom 和实际dom 的分离和衔接
- 通过创建虚拟DOM树来实现虚拟DOM和实际DOM的分离
- 通过Diff算法找到需要更新的节点，然后将这些节点更新到真实的DOM上，实现了虚拟DOM与实际DOM的分离和衔接
技术详解
Vue中通过创建虚拟DOM树来实现虚拟DOM和实际DOM的分离。在Vue更新节点的过程中，首先会对新旧节点进行比对，找出需要更新的节点，然后再将这些节点更新到实际DOM上。
具体流程如下所示：
- 在开始阶段，Vue通过编译器将template模板转换为render函数，并生成一个虚拟DOM树；
- 在更新节点时，Vue使用Diff算法比较新旧虚拟DOM树的差异，找出需要更新的节点；
- 在更新节点之前，Vue会先创建新的虚拟DOM树，并且将这个虚拟DOM树与旧的虚拟DOM树进行比较，找出需要更新的节点，这个过程称之为“Diff”算法；
- 在找出需要更新的节点后，Vue会将这些节点更新到真实的DOM上，这个过程称之为“打补丁（Patch）”。
总的来说，Vue通过Diff算法找到需要更新的节点，然后将这些节点更新到真实的DOM上，实现了虚拟DOM与实际DOM的分离和衔接。由于Vue在更新节点时只更新需要更新的部分，而不是整个页面，因此可以提高页面的性能和效率。