在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. robot framework使用小结（三）

    robot framework采用行为驱动 新建测试案例baidu04,添加Library:Selenium2Library 右键项目名robotProject-->New Resource-- ...

  2. 并发05--JAVA并发容器、框架、原子操作类

    一.ConcurrentHashMap的实现原理与使用 1.为什么要使用ConsurrentHashMap 两个原因,hashMap线程不安全(多线程并发put时,可能造成Entry链表变成环形数据结 ...

  3. CSS DIV中表格居中显示

    将div的text-align设为center,然后将table的margin设为auto,即: <div> <table style="margin:auto; widt ...

  4. P4817 Fruit Feast G

    最开始拿到这道题的时候,题目中其实只规定了两种水果的饱食度,可以理解成价值或是重量,在不超过T的情况求最大值.第一眼看过去感觉就是装箱问题(背包),只不过这道题用的是完全背包,但是考虑到喝水的情况,做 ...

  5. 【搬砖】/etc/passwd 文件结构

    文件的内容: 每个Linux都会有root账号,以此来说明,从内容上看,每行都使用[:]分隔(注意:每行前面的数字是行号,不是内容),所以一共有七部分内容,分别是: 1. 账号名称:root,用来对应 ...

  6. Django项目中集成第三方登录时出现的错误

    原以为是被反爬 没想到 总结:这里的http应该是https协议,以后要更加小心 了,不能犯这种低级错误

  7. 搭建一套ASP.NET Core+Nacos+Spring Cloud Gateway项目

    前言     伴随着随着微服务概念的不断盛行,与之对应的各种解决方案也层出不穷.这毕竟是一个信息大爆发的时代,各种编程语言大行其道,各有各的优势.但是有一点未曾改变,那就是他们服务的方式,工作的时候各 ...

  8. 初步了解JVM

    先看一眼JVM虚拟机运行时的内存模型: 1.方法区 Perm(永久代.非堆) 2.虚拟机栈 3.本地方法栈 (Native方法) 4.堆 5.程序计数器 1 首先的问题是:jvm如何知道那些对象需要回 ...

  9. 12 . Kubernetes之Statefulset 和 Operator

    Statefulset简介 k8s权威指南这样介绍的 "在Kubernetes系统中,Pod的管理对象RC.Deployment.DaemonSet和Job都面向无状态的服务.但现实中有很多 ...

  10. css中 出现height为100%失效的原因及解决方案

    我们都知道需要给html和body标签设置了高度height:100%之后,再给内部的div设置height:100%的时候,内部div的高度100%才会起到作用.这是由于:%是一个相对父元素计算得来 ...