Vue虚拟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属性值