ps:大致转载知乎文章

vue和react的虚拟dom都采用类似的diff算法,核心大概可以归为两点

1,两个相同的组件产生类似的DOM结构,不同的组件产生不同的DOM结构;

2,同一层级的一组节点,他们可以通过唯一的id进行区分。

基于以上两点假设,是的虚拟的DOM的Diff算法的复杂程度从O(n^3)降到了O(n)。

当页面的数据发上变化的时候,Diff算法只会比较同一层级的节点:

如果节点类型不同,直接干掉前面的节点,在创建并插入新的节点,不会再比较这个节点以后的子节点了。

如果节点类型相同,则会重新设置节点的属性,从而实现节点的更新。

当某一层有很多相同的节点时,也就是列表节点时,Diff算法的更新过程默认情况下也是遵循以上的原则。

如下例子:

我们希望在B和C之间加一个F,Diff算法默认执行起来是这样的

即把C更新成F,D更新成C,E更新成D,最后再插入E,是不是很没有效率?

所以我们需要使用key来给每个节点做一个唯一的标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点。

所以一句话,key的作用就是为了搞笑的更新虚拟DOM。另外vue中在使用相同标签名元素的过度切换时,

也会使用到key属性,其目的也是为了让vue可以区分他们,否则vue只会替换其内部属性而不触发过渡效果。

ps:key最好不要用index,用单一的唯一的标记

diff算法(核心)的更多相关文章

  1. 【React自制全家桶】二、分析React的虚拟DOM和Diff算法

    一.React如何更新DOM内容: 1.  获取state 数据 2.  获取JSX模版 3.  通过数据 +模版结合,生成真实的DOM, 来显示,以下行代码为例(简称代码1) <div id= ...

  2. 虚拟dom?diff算法?key?Vue原理的核心三问?打包教你搞定。

    为什么需要虚拟DOM 先介绍浏览器加载一个HTML文件需要做哪些事,帮助我们理解为什么我们需要虚拟DOM.webkit引擎的处理流程,如下图所示: 所有浏览器的引擎工作流程都差不多,如上图大致分5步: ...

  3. 详解vue的diff算法

    前言 我的目标是写一个非常详细的关于diff的干货,所以本文有点长.也会用到大量的图片以及代码举例,目的让看这篇文章的朋友一定弄明白diff的边边角角. 先来了解几个点... 1. 当数据发生变化时, ...

  4. 浅析vue2.0的diff算法

    一.前言 如果不了解virtual dom,要理解diff的过程是比较困难的. 虚拟dom对应的是真实dom, 使用document.CreateElement 和 document.CreateTe ...

  5. Virtual DOM 系列三:Diff算法

    DOM操作是昂贵的,为了减少DOM操作,才有了Virtual DOM.而Virtual DOM的关键就是通过对比新旧vnode,找出差异部分来更新节点.对比的关键算法就是Diff算法. 历史由来: d ...

  6. vue的diff算法

    前言 我的目标是写一个非常详细的关于diff的干货,所以本文有点长.也会用到大量的图片以及代码举例,目的让看这篇文章的朋友一定弄明白diff的边边角角. 先来了解几个点... 1. 当数据发生变化时, ...

  7. react虚拟dom diff算法

    react虚拟dom:依据diff算法 前端:更新状态.更新视图:所以前端页面的性能问题主要是由Dom操作引起的,解放Dom操作复杂性 刻不容缓 因为:Dom渲染慢,而JS解析编译相对非常非常非常快! ...

  8. 解析vue2.0的diff算法 虚拟DOM介绍

    react虚拟dom:依据diff算法台 前端:更新状态.更新视图:所以前端页面的性能问题主要是由Dom操作引起的,解放Dom操作复杂性 刻不容缓 因为:Dom渲染慢,而JS解析编译相对非常非常非常快 ...

  9. 理解Vue 2.5的Diff算法

    DOM"天生就慢",所以前端各大框架都提供了对DOM操作进行优化的办法,Angular中的是脏值检查,React首先提出了Virtual Dom,Vue2.0也加入了Virtual ...

随机推荐

  1. ARGB色彩模式

    看到#ff ff ff 00 00这种 就是啦 .开头两位表示透明度.

  2. Android中微信抢红包插件原理解析和开发实现

    一.前言 自从去年中微信添加抢红包的功能,微信的电商之旅算是正式开始正式火爆起来.但是作为Android开发者来说,我们在抢红包的同时意识到了很多问题,就是手动去抢红包的速度慢了,当然这些有很多原因导 ...

  3. router登录逻辑实现页面跳转

    main.js文件中router.beforeEach((to, from, next) => { NProgress.start() const token = localStorage.ge ...

  4. Codeforces Round #578 (Div. 2) E. Compress Words (双哈希)

    题目:https://codeforc.es/contest/1200/problem/E 题意:给你n个单词,你需要把他合成成一个句子,相邻的两个单词,相邻部分相同的话可以把其中一个的删掉 思路:因 ...

  5. BUUCTF | [HCTF 2018]admin

    首先爬一遍整个网站,发现有没注册的时候有“login”,"register",这两个页面,注册一个123用户登录后发现有 "index“,”post“,”logout“, ...

  6. 2018-2019-2 《Java程序设计》第10周学习总结

    20175319 2018-2019-2 <Java程序设计>第10周学习总结 教材学习内容总结 本周学习<Java程序设计>第十二章java多线程机制: - 进程与线程 程序 ...

  7. VS2010提示error TRK0002: Failed to execute command

    转自VC错误:http://www.vcerror.com/?p=277 问题描述: windows8自动更新Microsoft .NET Framework 3.5和4.5.1安全更新程序,今天用V ...

  8. docker 应用

    在ubuntu安装docker 编写Dockerfile (用来操作容器) FROM java:8 #获取java官方镜像 jdk版本为1.8 VOLUME /tmp # 数据存储目录,容器退出后数据 ...

  9. Django--Aadmin入门

  10. 简单DP入门(二) 最长上升子序列及其优化

    最长上升子序列解决问题: 有N个数,求出它最长的上升子序列并输出长度. 在题里不会讲的这么直白,这个算法往往会与其他的算法混在一起使用. 在这篇文章中不会出现其他的例题,为了让大家更好的理解,我只会对 ...