了解diff算法前我们需要先了解什么是Virtual
一.什么是Virtual DOM(虚拟DOM)
Virtual DOM(虚拟DOM)是Real DOM(真实DOM)的JS对象 我们看下图方便理解
(不会画图 只能借鉴一下了)
虚拟DOM 就把是 真实DOM的 标签名和标签属性和子标签以及文本节点 都以js的对象的样式呈现
二.了解diff算法
diff算法(个人简单理解):diff算法会将 新的虚拟DOM 和 旧的虚拟DOM 进行对比 找出差异 将差异封装为补丁(如果存在无差异的虚拟节点,旧虚拟节点将会得到复用),通过方法的循环遍历然后打到 真实DOM 上,以差异化最小的代价去操作DOM,
先上图
图中标注的真实DOM对应右边虚拟DOM
一旦我改变真实DOM的文本内容 就会生成一个新的虚拟DOM(切记如果修改真实DOM文本后 就会立即执行deff算法 以最小化进行更新视图)
diff算法本质就是找出新旧虚拟DOM的差异然后最小化的对视图进行更新
1.数据改变就会触发deff算法中setter