在vue中我们只要操作数据，就可以渲染和更新数据，这背后的boss就是diff算法

vue和react的虚拟DOM的Diff算法大致相同，其核心是基于两个简单的假设：

1、

俩个相同组件产生类似DOM结构，俩个不同组件产生不同DOM结构

2、

同一层级下的一组节点，他们同唯一的id进行区分

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

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

diff的默认渲染

如图

有key值得情况下

vue中v-for的更多相关文章

  1. vue中的vue-cli

    在前面的学习过程中我相信你们已经对vue有了一定的了解,现在我们来看一下vue中的vue-cli. 学习这个我们首先需要的是node环境的,如果你的网络环境慢的话建议安装淘宝镜像,在cmd中输入 np ...

  2. Vue学习笔记七：Vue中的样式

    目录 两种样式 class样式 内联样式 两种样式 Vue中使用样式方式有两种,一种是class样式,一种是内联样式也就是style class样式 class样式使用的方式有5种,HTML如下 &l ...

  3. vue 中 直接操作 cookie 及 如何使用工具 js-cookie

    转载:https://www.cnblogs.com/xiangsj/p/9030648.html vue 中直接操作 cookie 以下3种操作方式 set: function (name, val ...

  4. vue中动态添加div

    知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: ...

  5. vue中$watch源码阅读笔记

    项目中使用了vue,一直在比较computed和$watch的使用场景,今天周末抽时间看了下vue中$watch的源码部分,也查阅了一些别人的文章,暂时把自己的笔记记录于此,供以后查阅: 实现一个简单 ...

  6. 025——VUE中事件的基本使用与VUE中差异

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 024——VUE中filter的使用

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 023——VUE中数据排序sort() / 数据反转 reverse() 的使用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 022——VUE中remove()方法的使用：

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  10. 内置组件 && vue中强大的缓存机制之keep-alive

    vue中强大的缓存机制之keep-alive 最近在用vue做项目,在切换页面时发现切换回原来的页面无法保存原来的状态. 如A页面需要ajax请求数据,然后切换到B页面做某些事情,再切换回A页面时,A ...

随机推荐

  1. 微信小程序 自定义省市选择器

    1.把省市数据放在city.js中,city.js放在until目录下 // city.js module.exports = { "province": [ { "ti ...

  2. VC单选按钮控件(Radio Button)用法（转）

    先为对话框加上2个radio button,分别是Radio1和Radio2. 问题1:如何让Radio1或者Radio2默认选上?如何知道哪个被选上了? 关键是选上,“默认”只要放在OnInitDi ...

  3. P1640 [SCOI2010]连续攻击游戏【并查集】

    题目描述 lxhgww最近迷上了一款游戏,在游戏里,他拥有很多的装备,每种装备都有2个属性,这些属性的值用[1,10000]之间的数表示.当他使用某种装备时,他只能使用该装备的某一个属性.并且每种装备 ...

  4. angular弹出对话框结构

    angular dialog标准结构,注意有checkbox时,需要外包一层div,checkbox-wrapper类的这个样式控制了不显示滚动条.

  5. html实体引用

    原义字符 等价字符引用 < < > > " " ' &apos; & &

  6. python之类与对象（一）

    1.改变对象的字符串显示,要改变一个实例的字符串表示,可重新定义它的 str () 和 repr () 方法 class Pair: def __init__(self, x, y): self.x ...

  7. day03总结

    一. 基本数据类型# 1.整型int# 作用:记录年龄.等级.号码等状态# 定义与使用# age = 999# level = 10# qq = 383838338 # res=age * 1# pr ...

  8. Pandas基础知识图谱

    所有内容整理自<利用Python进行数据分析>,使用MindMaster Pro 7.3制作,emmx格式,源文件已经上传Github,需要的同学转左上角自行下载或者右击保存图片.该图谱只 ...

  9. Re5ilio 5ync：资源神器

    文章目录 #0x0 简单的介绍 #0x1 安装使用 #0x10 下载 #0x11 安装 #0x12 升级pro权限 #0x13 开始添加资源 #0x14 后续 一定要小心哦!! #0x0 简单的介绍 ...

  10. lottery+web2

    lottery 题目分析 题目给了一个彩票网站,经过页面的探索,没有发现明显漏洞,进行目录扫描,发现该站存在.git文件 猜测存在源码泄露,使用githack利用: 获得网页源码,进行源码分析 源码审 ...