<ul id='list'>
<li class='item'>Item1</li>
<li class='item'>Item2 </li>
</ul>
var tag = {
tag: 'ul',
attrs: {
id: 'list'
},
children: [
{
tag: 'li',
attrs: {
className: 'item'
},
children: ['Item1']
},
{
tag: 'li',
attrs: {
className: 'item'
},
children: ['Item1']
}
]
}
/**
* vdom如何使用,snabbdom的实现vdom的库
* h函数,patch函数
* vue在官方文档中提到与react的渲染性能对比中,因为其使用了snabbdom而有更优异的性能。
*/
snabbdom是一个Virtual - DOM的实现库,它专注于使用的简单以及功能和的模型化,并在效率和性能上有着很好的表现。如果你还不知道什么是Virtual - DOM技术,它是一种网页中通过diff算法来实现网页修改最小化的方法,
react底层使用了这样的机制来提高性能。从Vue2发布开始,也开始使用了这样的机制。Vue并没有选择自己重新造一套Virtual - DOM的算法,而是在snabbdom的基础上构建了一个嵌入了框架本身的fork版本。
可以说,Vue就是在使用snabbdom的Virtual - DOM算法。
/**
* 基本的算法实现使用过程 diff,
*/
// 一、
patch(containter, vnode);
// 怎么将vnode生成真实的DOM
function creatElement(vnode) {
var tag = vnode.tag;
var attrs = vnode.attrs || {};
var children = vnode.children || [];
if (!tag) return null;
// 创建元素
var elem = document.createElement(tag);
var attrName;
for (attrName in attrs) {
if (attrs.hasOwnProperty(attrName)) {
elem.setAttribute(attrName, attrs[attrName]);
}
}
// 子元素
children.forEach(childnode => {
elem.appendChild(creatElement(childnode));
});
return elem;
}
// 二、找出差异
patch(vnode, newVnode);
// 如果二个元素类型不同、key值不同,那么认为他们是不同的元素,直接用新的元素替换前一个
function updateChildren(vnode, newVnode) {
var children = vnode.children || [];
var newChildren = newVnode.children || [];
children.forEach(function (child, index) {
var newChild = newChildren[index];
if (newChild == null) {
return;
}
if (child.tag === newChild.tag) {
// 如果二个一样使用递归
updateChildren(child, newChild);
} else {
// 如果二者不相等
replaceNode(child, newChild);
}

});
}
// 替换的操作
function replaceNode(vnode, newVnode) {
var elem = vnode.elem;
var newElem = creatElement(newVnode);
// 替换
}
/**
* v-if:条件语句,它确保在切换过程中条件内的事件监听和子组件适当的销毁和重建
* 是惰性的,如果条件为假的时候,什么也不做,只有为真的的时候,才开始渲染条件块
* ,有更高的切换开销.
* v-show:不管条件是什么,元素总会被渲染,并且只是基于css进行切换
* 一般来说,v-if具有更高的切换开销,v-show具有更高的渲染开销,如果频繁的
* 切换v-show较好,如果在运行时条件很少改变,则使用V-if,
*/
// key的作用:
// 在react中key--是用来帮助 react 识别哪些内容被更改、添加或者删除

vdom,diff,key 算法的了解的更多相关文章

  1. 谈谈Vue/React中的虚拟DOM(vDOM)与Key值

    谈谈Vue/React中的虚拟DOM(vDOM)与Key值 一.DocumentFragment 在了解虚拟DOM前,先来了解DOM的一个对象属性--DocumentFragment. 在一次操作中, ...

  2. DOM Diff(差分)算法

    1. 算法由来 React调用render()方法后,会生成一个React元素组成的树. 再次调用,生成一个新的树.React比较两者的差异,然后更新UI. 如果单纯使用算法,来查找两个DOM树的差异 ...

  3. 记一次诡异的bug调试——————关于JDK1.7和JDK1.8中HashSet的hash(key)算法的区别

    现象: 测试提了一个bug,我完全复现不了,但是最吊诡的是在其他人的机器上都可以复现.起初以为是SVN合并后出现的冲突,后来经过对比法排查: step 1: 我本地开两个jetty,一个跑合并之前的版 ...

  4. ReactiveNative学习之Diff算法

    React 源码剖析系列 - 不可思议的 react diff深入浅出React(四):虚拟DOM Diff算法解析React diff 算法总结链接引用的文章React出于性能的考虑,为了避免频繁操 ...

  5. vue diff算法 patch

    1.diff比较算法 图示: diff比较只会在同层级进行, 不会跨层级比较. 所以diff是:广度优先算法. 时间复杂度:O(n) 代码示例: <!-- 之前 --> <div&g ...

  6. 深入理解React:diff 算法

    目录 序言 React 的核心思想 传统 diff 算法 React diff 两个假设 三个策略 diff 具体优化 tree diff component diff element diff 小结 ...

  7. DIFF算法浅析(三)在react中的实现

    在虚拟dom中diff的实现. 分别从4个方面: DIFF抽象概念(概述.时间复杂性分析) 在Vue2中的实现(版本2.6.11.必要性.执行方式) 在React中的实现(版本16.13.1,必要性. ...

  8. 虚拟DOM与diff算法

    虚拟DOM与diff算法 虚拟DOM 在DOM操作中哪怕我们的数据,发生了一丢丢的变化,也会被强制重建整预DOM树.这么做,涉及到很多元素的重绘和重排,导致性能浪费严重 只要实现按需更新页面上的元素即 ...

  9. 文本diff算法Patience Diff

    一般在使用 Myers diff算法及其变体时, 对于下面这种例子工作不是很好, 让变化不易阅读, 并且容易导致合并冲突 void Chunk_copy(Chunk *src, size_t src_ ...

随机推荐

  1. OracleAES加密

    OracleAES加密 (2012-04-29 21:52:15)转载▼标签: oracle aes 加密 it 分类: 开发-- 加密函数CREATE OR REPLACE FUNCTION FUN ...

  2. [原著]java或者Js 代码逻辑来处理 突破 oracle sql “IN”长度的极限的问题

    注:本文出自:博主自己研究验证可行   [原著]java或者Js  代码逻辑来处理  突破 oracle  sql "IN"长度的极限的问题    在很多的时候 使用 select ...

  3. BIgnum类的程序提交

    日期:2018.7.19 星期四 博客期:002 这之前赶着做一个单机游戏的修改器忘了时间,不好意思啊!今天我就把Bignum类的源代码发出来,文件的话,我不知道怎样发,待我好好研究研究这个网站哈!因 ...

  4. day 08字符编码 文件处理

    字符编码1.软件启动流程(打开notepad++文档)从硬盘将软件加载到内存上加载test.txt到内存中执行notepad++的代码,将test.txt打到屏幕上 python解释器也是一个应用软件 ...

  5. Solver Of Caffe

    本文旨在解决如何编写solver文件. Solver的流程: 1.     设计好需要优化的对象,以及用于学习的训练网络和用于评估的测试网络.(通过调用另外一个配置文件prototxt来进行) 2.  ...

  6. Redis扩展

    Redis扩展下载地址:https://windows.php.net/downloads/pecl/releases/redis/ PHP怎么安装redis扩展 http://www.php.cn/ ...

  7. 实现本地svn目录同步时,服务器的相应目录保持自动同步

    提交一个TEST文件夹 但是服务器上并没有显示 而新检出的目录却有 这个时候需要手动去update才会显示,而不可能每次都去update,所以,就用到配置自动更新 1.创建svn目录:mkdir /v ...

  8. Allegro PCB Design GXL (legacy) 从dxf文件中导入板框

    Allegro PCB Design GXL (legacy) version 16.6-2015 新建brd文件,并设置好相应的参数之后,点击菜单:File > Import > DXF ...

  9. 3月9日(用 DBHelper 工具连接 mysql 数据库 实现登录验证)

    一. 用DBHelper 与mysql 连接 实现最简单的登录验证. (1)新建 web project ----->选择src导入 DBHelper 工具包-------->选择web  ...

  10. Nignx添加proxy_pass可能造成DNS解析超时的问题解决

    resolver 219.149.194.55;         location ^~ /bigdata        {          proxy_set_header Host $host; ...