Vue中Diff算法

 虚拟DOM

定义

虚拟DOM是一种用于在前端开发中模拟真实DOM的技术。它是一种抽象的数据结构（简单来说就是一个Javascript对象），用于描述HTML或XML文档的结构和内容。通过将页面的状态和结构保存在内存中，而不是直接操作真实的DOM，虚拟DOM能够减少不必要的DOM操作，从而提高页面性能。

 Diff算法

vue 虚拟dom和diff算法详解_vue的dom diff算法-CSDN博客

Vue的Diff算法主要用于在数据发生变化时，比较新旧虚拟DOM树（VNode树），找出需要更新的节点，然后仅将这些变化的部分应用到真实的DOM上。这种算法的核心思想是通过比较来避免不必要的DOM操作，从而提高渲染效率。

1. 基本概念

• 最长公共子序列（Longest Common Subsequence, LCS）：在两个序列（字符串或文件）中都出现的具有最长长度的子序列。通过找到这些最长公共子序列，可以确定两个文本或文件之间的差异。
• 动态规划（Dynamic Programming）：Diff算法的核心原理之一，通过构建一个二维矩阵来记录两个文本或文件之间的对比结果。在矩阵中，每个格子表示当前位置的最长公共子序列的长度。

2. 对比方式

• 行对比（Line-based Diff）：将两个文本或文件逐行进行对比，标记出每行中不同的部分。
• 块对比（Hunk-based Diff）：将文本或文件按照特定的规则分成块，然后对比这些块之间的差异。这种方式在处理大文件时更为高效。

3. 算法流程

1. 初始化：创建一个二维矩阵，用于记录两个文本或文件之间的对比结果。
2. 填充矩阵：遍历两个文本或文件的每一行（或块），计算并填充矩阵中的值。每个格子的值表示从文本或文件的开始到当前位置的最长公共子序列的长度。
3. 回溯路径：通过矩阵找到最长公共子序列的路径。这个路径揭示了两个文本或文件之间的差异。
4. 生成差异文件：根据回溯路径，生成一个差异文件，其中记录了两个文本或文件之间的差异信息。