在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. egret的WebView实现

    需求 在egret中嵌入网页,类似 . 网上大概有两种思路吧,一种是直接在body里面加入iframe,如:[Egret]里使用iframe标签达到内嵌多个web界面;另一种就是通过模仿htmlinp ...

  2. 【树形dp】Bzoj 1040骑士

    Description Z国的骑士团是一个很有势力的组织,帮会中汇聚了来自各地的精英.他们劫富济贫,惩恶扬善,受到社会各界的赞扬.最近发生了一件可怕的事情,邪恶的Y国发动了一场针对Z国的侵略战争.战火 ...

  3. JavaScript基础-自己定义自己的函数(016)

    把一个函数对象赋值给变量后,就可以通过这个变量再次定义函数,甚至可以在一个函数内部再次定义它自己: var scareMe = function () { alert("Boo!" ...

  4. tkinter的控件

    包含如下控件: Button  按钮控件 Canvas 画布控件,显示图形元素如线程或文本 Checkbutton 多选框控件,用于在程序中提供多项选择框 Entry 单行输入控件,用于显示简单的文本 ...

  5. Electron + Websoket 通讯

    Electron + WebSocket + node.js 通信 描述 本文主要介绍了结合 Electron 和 node.js 进行 Websocket 通讯的一个简单例子. 项目结构 main. ...

  6. ssh安全远程管理

    1.什么是ssh SSH 为 Secure Shell 的缩写,SSH 为建立在应用层基础上的安全协议.SSH 是目前较可靠,专为远程登录会话和其他网络服务提供安全性的协议.利用 SSH 协议可以有效 ...

  7. Linux超强截图工具flameshot

    Pop!_OS自带的截屏快捷键如下 但讲道理这个是真的不好用 所以我们借助第三方的截图工具,这里推荐flameshot(火焰截图) 在终端键入以下命令即可安装 sudo apt update sudo ...

  8. java 数据结构（三）：java常用类 三 日期时间API

    JDK 8之前日期时间API 1.获取系统当前时间:System类中的currentTimeMillis()long time = System.currentTimeMillis();//返回当前时 ...

  9. 数据可视化之powerBI基础（十二）PowerBI导入Excel数据有哪几种方式？

    https://zhuanlan.zhihu.com/p/64999937 Excel作为使用最频繁.应用最广泛.用户最庞大的数据处理工具,当然也应该是PowerBI最常用的数据获取方式,本文介绍一下 ...

  10. 【Python】关于如何判断一个list是否为空的思考

    前言 今天随手翻 stackoverflow,看到问题叫 How do I check if a list is empty? 一看这个问题,不难猜到到这是一个刚学 Python 的人提问的,因为这个 ...