虚拟DOM

• 虚拟DOM

  Vue的模板标签,被Vue解析成一套虚拟DOM结构,Vue内部将虚拟DOM解析成真实DOM,真实DOM属性过多,遍历耗时(大概300来个属性)

• 虚拟DOM diff算法

  • 用来比较新旧虚拟的
  • 同级比较
    • 1.根标签改变,删除重新建立整个DOM树
    • 2.根元素未变,属性改变
      • DOM复用,只更新新属性
    • 3.根据标签和属性都未变,子标签改变
      • a. key没有变
        • item数据没变, 直接使用原来的真实DOM
        • item数据变了, 对原来的真实DOM进行数据更新
      • b. key变了
        • 销毁原来的真实DOM, 根据item数据创建新的真实DOM显示(即使item数据没有变)

• key为index的问题

  • 添加/删除/排序 => 产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低
  • 如果item界面还有输入框 => 产生错误的真实DOM更新 ==> 界面有问题
    注意: 如果不存在添加/删除/排序操作, 用index没有问题

• 解决:
  使用item数据的标识数据作为key, 比如id属性值