• 35648

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

vue 之 虚拟DOM和key属性作用

欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/jsh/2019/0711/7135.html 1190000019726053

一、jquery时代

jquery帮助简化了我们访问dom的api,我们可以很快的获取DOM,并为其绑定事件,可以方便我们去操作更新DOM。

clipboard.png

但是当我们的事件变得多起来的时候会出现类似下图的效果,会使的我们必须小心翼翼,处理好我们的DOM操作。

clipboard.png

二、Vue的出现

Vue的出现解决了上诉痛点。

clipboard.png

此时我们只需要去通过事件操作我们的state数据,数据的更新会自动更新到视图。(我们不在直接操作DOM而是由数据去响应视图变化)

DOM的更新也是很消耗性能的,如何能高效的复用和更新DOM,引入了虚拟DOM。

数据加模版会生成一个虚拟DOM,如下:

clipboard.png

鉴于我们很少去跨层级的添加和删除结点,我们的虚拟DOM的更新使用的是同层级的比对算法(diff算法)。

clipboard.png

我们通过如下案例可以分析diff的比对算法

案例1

clipboard.png
我们只需要交换位置即可

案例2

clipboard.png

删除C结点,在第三层添加C,第四层店家E、F

案例3

clipboard.png

删除C结点,添加G结点以及E、F结点。

案例4:无key

clipboard.png

原地复用,B1更新为B2,B2更新为B1.

案例5:有key

clipboard.png

存在key的情况下,直接交换位置。

案例6:有key

clipboard.png

直接插入新的结点。

相关文章

暂住......别动,不想说点什么吗?
  • 全部评论(0
    还没有评论,快来抢沙发吧!