江苏龙网

  1. 首页 > 资讯 > 科技 > >

|快看，VUE对你的页面做了什么( 二 )



六、旧节点队列 中无 与NewStart相同的节点
如果在旧的节点队列中找不到与NewStart相同的节点 ， 那么就直接在OldStart前直接插入NewStart节点 。
按照上面的规则一直对比 ， 直到NewStart到NewEnd相遇或OldStart到OldEnd相遇 ， 此时如果新节点队列中仍有没匹配到的节点 ， 那么就将它们插入旧的节点队列中去 ， 如果旧的节点队列中仍有未匹配到的节点 ， 那么就删掉他们 。

|快看，VUE对你的页面做了什么
本文插图

在完成对比后 ， 将新的DOM树也就完成了一次更新 。
Vue的diff算法主要实现思路大致如此 ， 如果要完整的了解他还是需要阅读大量的源码的 ， 有进阶想法的同学可以去看看 。
【|快看，VUE对你的页面做了什么】VUE框架相对学习成本低 ， 易上手且高效灵活在企业项目开发中比较受欢迎 。 当前 ， 普元的DevOps、微服务、容器云等产品前端技术均使用了VUE框架 。 学习其底层运行原理还是有助于提升开发人员的编码技能的 。

|快看，VUE对你的页面做了什么
本文插图

关于作者：夏夏 ， 前端工程师 ， 参与普元DevOps产品开发 ， 以及微服务、容器云等产品开发 ， 负责前端页面设计、架构搭建等工作 。 善于架构搭建、组件封装及相关算法设计 。
关于EAWorld：微服务 ， DevOps ， 数据治理 ， 移动架构原创技术分享 。


推荐阅读


上一篇：互联网|京东11.11：5G手机10分钟成交额同比增长超10倍

下一篇：|「早报」豪威获美供货华为许可； Mate40系列8秒成交过亿