JQuery

  • 提供了对DOM操作的API,简化操作,易于绑定事件,通过事件操作DOM
  • 问题
    Vue_005_虚拟DOM与key的作用
  • Vue和React的改善:引入数据中间层(虚拟DOM)
    通过事件改变数据,数据映射到真实的DOM,并不直接操作DOM
    Vue_005_虚拟DOM与key的作用

虚拟DOM

结构

Vue_005_虚拟DOM与key的作用

树操作机制

  • 树的操作机制立足于树的对比机制:只比对同层节点,确定改变的节点

移动

移动C节点
Vue_005_虚拟DOM与key的作用

删除新建(同层对比实现跨层移动)

删除C节点(随之删除E、F),第三层新增C节点,新建E、F
Vue_005_虚拟DOM与key的作用

删除新建

删除C节点(E、F节点随之删除),新建G节点,新建E、F节点
Vue_005_虚拟DOM与key的作用

更新删除新建(无key)

B1更新为B2,B2更新为B1,B2下新建E、F,删除E、F
为更好处理这种情况,引入了key属性,变为节点的移动
Vue_005_虚拟DOM与key的作用

移动(有key)

Vue_005_虚拟DOM与key的作用

插入(有key)

插入B4
Vue_005_虚拟DOM与key的作用

分类:

技术点:

相关文章: