vdom如何应用，核心api是什么
1、介绍snabbdom（开源社区用的多，vue2用的是他）
首先回顾下之前的vdom格式
真实的dom
<body>

　　<ul id="list">

　　　　<li class="item">item 1</li>

　　　　<li class="item">item 2</li>

　　</ul>

</body>
js模拟的dom
{

　　tag: 'ul',

　　attrs: {

　　　　id: 'list'

　　},

　　children:[{

　　　　tag: 'li',

　　　　attrs: { className: 'item' },

　　　　children: ['item 1']

　　},{

　　　　tag: 'li',

　　　　attrs: { className: 'item'},

　　　　children:['item 2']

　　}]

}

用js模拟的体量非常小。

看snabbdom里面的介绍。一个h函数，一个patch函数，就是vdom最主要的api。看h函数传的是什么。

第一个是标签div，标签对应的id #container，标签对应的class，two,classes。
第二个参数是，这个标签绑定了一个事件，函数叫someFn。
第三个是个数组，数组又是h函数，传入标签，属性，文本
第一次渲染是全部渲染到浏览器中，第二次渲染，数据源有所改变，根据改变重新生成一个newVnode，这个时候再patch。这个时候patch的时候，会进行一个对比，这个对比是只找出需要更新的那部分来更新
上面例子的模拟
<!DOCTYPE html>

<html lang="en">

　　<head>

　　　　<meta charset="UTF-8">

　　　　<meta name="viewport" content="width=device-width, initial-scale=1.0">

　　　　<meta http-equiv="X-UA-Compatible" content="ie=edge">

　　　　<title>Document</title>

　　</head>

　　<body>

　　　　<div id="container"></div>

　　　　<button id="btn-change">change</button>

　　　　<!-- 这里版本要一致 -->

　　　　<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom.js"></script>

　　　　<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-class.js"></script>

　　　　<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-props.js"></script>

　　　　<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-style.js"></script>

　　　　<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-eventlisteners.js"></script>

　　　　<script src="https://cdn.bootcss.com/snabbdom/0.7.3/h.js"></script>

　　　　<script>

　　　　　　var snabbdom = window.snabbdom; 

　　　　　　// 定义patch

　　　　　　var patch = snabbdom.init([

　　　　　　　　snabbdom_class,

　　　　　　　　snabbdom_props,

　　　　　　　　snabbdom_style,

　　　　　　　　snabbdom_eventlisteners

　　　　　　])

　　　　　　// 定义h

　　　　　　var h = snabbdom.h;

　　　　　　var container = document.getElementById('container');

　　　　　　// 生成vnode

　　　　　　var vnode = h('ul#list', {}, [

　　　　　　　　h('li.item', {}, 'item 1'),

　　　　　　　　h('li.item', {}, 'item 2')

　　　　　　])

　　　　　　patch(container, vnode);

　　　　　　//模拟改变

　　　　　　var btnChange = document.getElementById('btn-change');

　　　　　　btnChange.addEventListener('click', function(){

　　　　　　　　var newVnode = h('ul#list', {}, [

　　　　　　　　　　h('li.item', {}, 'item 1'),

　　　　　　　　　　h('li.item', {}, 'item b'),

　　　　　　　　　　h('li.item', {}, 'item 3')

　　　　　　　　]);

　　　　　　　　patch(vnode, newVnode);

　　　　　　})

　　　　</script>

　　</body>

</html>

item1没有渲染，item b, item3闪烁了

2、重做之前的demo
<!DOCTYPE html>

<html lang="en">

<head>

　　<meta charset="UTF-8">

　　<meta name="viewport" content="width=device-width, initial-scale=1.0">

　　<meta http-equiv="X-UA-Compatible" content="ie=edge">

　　<title>Document</title>

</head>

<body>

　　<div id="container"></div>

　　<button id="btn-change">change</button>

　　<!-- 这里版本要一致 -->

　　<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom.js"></script>

　　<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-class.js"></script>

　　<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-props.js"></script>

　　<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-style.js"></script>

　　<script src="https://cdn.bootcss.com/snabbdom/0.7.3/snabbdom-eventlisteners.js"></script>

　　<script src="https://cdn.bootcss.com/snabbdom/0.7.3/h.js"></script>

　　<script>

　　　　var snabbdom = window.snabbdom;

　　　　// 定义patch

　　　　var patch = snabbdom.init([

　　　　　　snabbdom_class,

　　　　　　snabbdom_props,

　　　　　　snabbdom_style,

　　　　　　snabbdom_eventlisteners

　　　　])

　　　　// 定义h

　　　　var h = snabbdom.h;

　　　　// 将该数据展示成一个表格。然后随便修改一个信息，表格也跟着修改

　　　　var data = [{

　　　　　　name: '张三',

　　　　　　age: '20',

　　　　　　address: '北京'

　　　　},{

　　　　　　name: '李四',

　　　　　　age: '21',

　　　　　　address: '上海'

　　　　},{

　　　　　　name: '王五',

　　　　　　age: '22',

　　　　　　address: '广州'

　　　　}];

　　　　data.unshift({

　　　　　　name: '姓名',

　　　　　　age: '年龄',

　　　　　　address: '地址'

　　　　});

　　　　var container = document.getElementById('container');

　　　　var btnChange = document.getElementById('btn-change');

　　　　// 渲染函数

　　　　var vnode;

　　　　function render(data) {

　　　　　　var newVnode = h('table',{}, data.map(function(item){

　　　　　　　　var tds = [];

　　　　　　　　for (i in item){

　　　　　　　　　　if(item.hasOwnProperty(i)){

　　　　　　　　　　　　tds.push(h('td', {}, item[i]+''))

　　　　　　　　　　}

　　　　　　　　}

　　　　　　　　return h('tr',{}, tds);

　　　　　　}));

　　　　　　if (vnode) {

　　　　　　　　// re-render

　　　　　　　　patch(vnode, newVnode);

　　　　　　} else {

　　　　　　　　// 初次渲染

　　　　　　　　patch(container, newVnode);

　　　　　　}

　　　　　　vnode = newVnode;

　　　　}

　　　　render(data);

　　　　btnChange.addEventListener('click', function(){

　　　　　　data[1].age = 30;

　　　　　　data[2].address = '深圳';

　　　　　　// re-render

　　　　　　render(data);

　　　　})

　　</script>

</body>

</html>

再查看dom，不再是整个table渲染。就只更新改变的dom。

3、核心api
　　h('<标签名>', {...属性}, [...子元素])
　　h('<标签名>', {...属性}, '...')
 
　　patch(container, vnode)
　　patch(vnode, newVnode)

虚拟dom应用的更多相关文章

  1. 虚拟dom与diff算法 分析

    好文集合: 深入浅出React(四):虚拟DOM Diff算法解析 全面理解虚拟DOM,实现虚拟DOM

  2. React虚拟DOM浅析

    在Web开发中,需要将数据的变化实时反映到UI上,这时就需要对DOM进行操作,但是复杂或频繁的DOM操作通常是性能瓶颈产生的原因,为此,React引入了虚拟DOM(Virtual DOM)的机制. 什 ...

  3. React的虚拟DOM

    ReactJs的一大特点就是引进了虚拟dom(Virtual DOM)的概念.为什么我们需要Virtual DOM,Virtual DOM给我们带来了什么优势. 首先我们要了解一下浏览器的工作流. 当 ...

  4. react通过自己的jsx语法将两者放在一起通过虚拟dom来渲染

    目前较为流行的react确实有很多优点,例如虚拟dom,单向数据流状态机的思想.还有可复用组件化的思想等等.加上搭配jsx语法和es6,适应之后开发确实快捷很多,值得大家去一试.其实组件化的思想一直在 ...

  5. 【虚拟DOM】√

    深度剖析:如何实现一个 Virtual DOM 算法 为什么虚拟DOM更优胜一筹 新建树,渲染树,新建新树,对比树(算法),最少dom操作的渲染树

  6. React生命周期和虚拟DOM

    一.虚拟DOM 1.React并不直接操作DOM,React中的render方法,返回一个DOM描述,React能够将这个DOM描述与内存中的表现进行比较,然后以最快的方式更新浏览器 2.React实 ...

  7. [深入react] 4.牛逼闪闪的虚拟DOM

    React.createElement嵌套后的结果就是虚拟dom,虚拟dom听着很高端,其实就是一个json,类似: { type:'div', props:{ className:"box ...

  8. React虚拟DOM具体实现——利用节点json描述还原dom结构

    前两天,帮朋友解决一个问题: ajax请求得到的数据,是一个对象数组,每个对象中,具有三个属性,parentId,id,name,然后根据这个数据生成对应的结构. 刚好最近在看React,并且了解到其 ...

  9. 实现一个简单的虚拟DOM

    现在的流行框架,无论React还是Vue,都采用虚拟DOM. 好处就是,当我们数据变化时,无需像Backbone那样整体重新渲染,而是局部刷新变化部分,如下组件模版: <ul class=&qu ...

  10. 虚拟DOM详解

    虚拟DOM简介 Virtual Dom可以看做一棵模拟了DOM树的JavaScript对象树,其主要是通过vnode,实现一个无状态的组件,当组件状态发生更新时,然后触发Virtual Dom数据的变 ...

随机推荐

  1. HTML布局排版2如何设置div总是相对于页面居中

    由于浏览器页面有大有小,为了适应浏览器宽度,可以让div总是对于浏览器居中,设置div左右两边的margin为auto可以实现这个效果.如图,第一个是默认div,无上下左右外边距,第二个是设置了mar ...

  2. CHIMA网络安全攻防大赛经验分享

    比赛模式 第一轮:20分钟基础知识赛(50道题) 安全运维,法律法规,linux操作系统等 第二轮:50分钟CTF夺旗(5道题) 题目涵盖 密码学 运用多种工具,如ASCII对照,古典密码,凯撒密码, ...

  3. iOS-打印控件

    20.UIPrintFormatterUIPrintFormatter时打印格式化的抽象基类:展示了传统的可打印的内容对象可以跨页边界.由于打印格式化,打印系统,可以自动打印与打印格式化的内容相关联的 ...

  4. AWS 监控服务（六）

    AWS CloudWatch 概念 基于确定的内容监控基础设施组件 基于指定的指标发送通知并触发各种操作 分布式统计数据和收集系统,用于收集并跟踪指标 默认情况下,在管理程序级别无缝收集指标,如CPU ...

  5. Linux_高级用法

    LInux如何压缩和解压文件 文件压缩与解压主要讲zip和tar 安静模式和文件夹 zip -r -q -o test.zip 需要打包文件 查看打包文件 du -h test.zip 上节学过的fi ...

  6. Span复习

    Span复习 using System; namespace Span复习 { class Program { static void Main(string[] args) { //Console. ...

  7. [转帖]linux操作系统测试工具

    linux操作系统测试工具 http://cfdtesting.com/879156.html 作者: minions_222      来源: CFDTesting.com采编      发布于:  ...

  8. Python3数据类型之数字

    1. Python数字类型的作用 Python数字类型用来存储数值,它是不可变对象,一旦定义之后,其值不可以被修改.如果改变了数字类型的值,就要重新为其分配内存空间. 定义一个数字类型的变量:a = ...

  9. CodeForces-166B-Polygons

    B. Polygons time limit per test:2 seconds memory limit per test:256 megabytes input:standard input o ...

  10. 第四章 函数之lambda 表达式和内置函数

    4.5 lambda 表达式 用于表示简单的函数. # 三元运算,为了解决简单的if else的情况,如:if 1 == 1:    a = 123else:    a = 456# 相当于a = 1 ...