`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属性值
标签：真实,Vue,DOM,item,虚拟,key 来源： https://www.cnblogs.com/jiangnizhi/p/15395057.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。