专栏首页EAWorld快看,VUE对你的页面做了什么

快看,VUE对你的页面做了什么

讲过了Vue的响应

Virtual DOM中负责将新旧DOM树中的节点进行对比并找出发生变更的节点这一工作是由diff来进行的,diff是Virtual DOM较为核心的部分,要对比两棵层级复杂的DOM树,diff的时间复杂度直接影响了新旧节点替换的性能。Vue实践的diff算法仅仅对同级的节点进行比较,因此时间复杂度为O(n)。如下图,diff算法仅对颜色相同的方框中的节点进行对比。

Diff算法首先对比新旧节点,这一对比仅在同层节点间进行。由于对比过程源码比较复杂且篇幅巨大,有兴趣的同学可以去github上看看,这里仅对算法进行解析,因此就不搬运源码了。

需要说明一下,在接下来的对比算法中,相同节点的概念,指的是两个节点的key、tag等在第一次渲染时打上的各种标识唯一DOM界的的标记、属性均一致,而不是包含它所带的值,样式颜色等。Patch操作说的是将两个节点进行对比将发生变化的一些属性更新,如果两个节点均包含子节点,那么对他们的子节点同样进行diff对比。在找出同层的两组新旧节点后,分别为他们打上开始和结束的标志,在对比过程中,开始和结束的标志不断向中间靠拢,直到新节点队列或旧节点队列中有一个的开始标志到结束标志之后,那么对比就完成了,整个对比过程如下图:

算法首先将四个被打了标记的节点做如下六种情况对比:

一、NewStart和OldStart

如果是同一节点那么直接将这两个节点进行patch操作,NewStart和OldStart标志后移到下一个节点

二、NewStart和OldEnd

如果是同一节点,将OldEnd节点移到OldStart前,标志前移一个节点,NewStart后移一个节点

三、NewEnd和OldStart

如果是同一节点,将OldStart节点移到OldEnd后,OldStart后移一个节点,NewEnd前移一个节点

四、NewEnd和OldEnd

如果是同一节点那么直接将这两个节点进行patch操作

五、与NewStart相同的节点在旧节点队列中

如果以上情况皆不满足,那么就在旧的节点队列中进行一次遍历对比,找出与NewStart相同的节点,后将该节点前移到OldStart前

六、旧节点队列中无与NewStart相同的节点

如果在旧的节点队列中找不到与NewStart相同的节点,那么就直接在OldStart前直接插入NewStart节点。

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

在完成对比后,将新的DOM树也就完成了一次更新。

Vue的diff算法主要实现思路大致如此,如果要完整的了解他还是需要阅读大量的源码的,有进阶想法的同学可以去看看。

VUE框架相对学习成本低,易上手且高效灵活在企业项目开发中比较受欢迎。当前,普元的DevOps、微服务、容器云等产品前端技术均使用了VUE框架。学习其底层运行原理还是有助于提升开发人员的编码技能的。

推荐阅读

DevOps之动态表单——优雅地把工作量甩给后端

那些Vue开发遇到的坑---响应式系统

DevOps平台之看板设计

本文分享自微信公众号 - EAWorld(eaworld),作者:夏夏

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-10-27

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【学好】前端新人如何能把框架学好?

    就是说,基本的js、html、css都ok啦,但前端框架要怎么学习会进度比较快呢?比较笼统的回答当然是要多写多看多练。但是,怎么样做会进度快一点呢?这其中应该也...

    web前端教室
  • Vue.js小白速成手册01

    建议安装visual Studio Code,下载地址:https://code.visualstudio.com/

    剽悍一小兔
  • Vue的生命周期和前端路由使用

    近半年来,我一直从事一个报表管理系统的开发。管理系统是给人用的,但我们团队并没有前端,所以我就兼任了大部分前端开发工作。在这半年的开发工作中,我学习了一些前端内...

    zhangheng
  • 感谢 Vue.js 拯救我这个前端渣渣,让 PowerJob 有了管理后台界面

    对于大部分非前端程序员来说,写网页无疑是一件非常痛苦的时间。如果说 JavaScript 还属于能够勉强搏一搏的水平,那 HTML 无疑是那座无法逾越的大山。什...

    HelloGitHub
  • Hi,一起学Vue.js吗

    久一最近新起的项目采用Spring Boot和Vue.js技术栈。这Vue.js都快3.0了,久一竟然还不会Vue.js。不行,我这倔脾气,元旦假期不出去玩耍了...

    用户1093975
  • Angular React Vue我应该选择什么?

    为 web 应用选择 JavaScript 开发框架是一件很费脑筋的事。现如今 Angular 和 React 非常流行,并且最近出现的新贵 VueJS 同样博...

    gemron的空间
  • Vue 3 和 Webpack 5 来了,手动搭建的知识该更新了

    长此以往,会导致你对整个项目的把控度越来越低。面试下一家公司的面试官问你,是否手动搭建过 Vue 项目的时候,对配置一问三不知? 。本文着重为大家讲解从 0 到...

    Nealyang
  • AngularJS、React 是真的被淘汰了吗?

    是这样,最近有个朋友跟我聊起,说前几天去面试北京的一家公司,和某度有点关系。面试官看我简历上写着 AngularJS,告诉我以后别用这个了,还有 React,并...

    闰土大叔
  • Vue 脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)

    文章内容覆盖范围,芝麻绿豆的破问题都有,不止于vue; 给出的是方案,但不是手把手一字一句的给你说十万个为什么!

    CRPER

扫码关注云+社区

领取腾讯云代金券