什么是虚拟dom
虚拟dom其实是里面内存型对象(js内存对象)属于内存数据 真实dom的一层映射
第一步
- 内存中生成一颗虚拟dom树
- 将内存中的虚拟dom树初始化渲染成真是dom树
- 当我们修改打塔里面的数据的数据的时候
- 将之前的虚拟dom树结合新的数据生成一颗新的虚拟dom树
- 将此次生成好的新的虚拟dom树与上一次的虚拟dom树结构进行对比,对比差异(diff算法)
- 将对比出来的差异的部分进行重新真实dom结构的渲染
diff算法
虚拟dom中,在dom的状态发生变化时,虚拟dom会进行diffyunsuan,来更新只需要被替换的dom,而不是全部重绘
在diff算法中,只平层的比较前后两颗dom树的节点,没有进行深度的遍历
- 如果节点类型改变,直接将旧节点卸载,替换为新节点,旧节点包括下面的子节点都将被卸载,如果新节点和旧节点仅仅是类型不同,但下面的所有节点都一样,这样做也是效率不高的一个地方。
- 节点类型不变,属性或者属性值改变,不会卸载节点,执行节点更新的操作。
- 为本改变,直接修改文字内容。
- 移动,增加,删除节点:
写代码时,如果没有给数组或者枚举类型定义一个key,就会采用上面的粗暴算法。
如果为元素增加key后,vue就能根据key,直接找到具体的位置进行操作,效率比较高。如下图: