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. Ubuntu 新装服务器部署流程

    1.设定时区 rm -f /etc/localtime cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime 2.配置apt-get源 sed -i ...

  2. 解决Adobe cs6系列软件在Windows10操作系统中无法正常运行问题

    大家好,我是安德风,很高兴今天能给大家一起解决Adobe cs6系列软件在Windows10操作系统中无法正常运行的问题.今天我以Adobe Photoshop cs6在Windows10环境安装运行 ...

  3. RBF神经网络学习算法及与多层感知器的比较

    对于RBF神经网络的原理已经在我的博文<机器学习之径向基神经网络(RBF NN)>中介绍过,这里不再重复.今天要介绍的是常用的RBF神经网络学习算法及RBF神经网络与多层感知器网络的对比. ...

  4. InstallerProjects打包

    C#—使用InstallerProjects打包桌面应用程序   前言 打包桌面应用程序实在是一个不常使用的东西,偶尔使用起来经常会忘东忘西的耽误时间,因此,这篇文章多以图片记录过程,也是用于备忘. ...

  5. 微信小程序常用控件汇总

    1.图片标签: <image src="/images/aaa.png"></image> 2.文本标签: <text>Hello</te ...

  6. Quartz.Net—基本操作

    Quratz基本架构 Scheduler基本操作 /// <summary> /// 调度器信息 /// </summary> /// <returns></ ...

  7. Java多线程系列--AQS之 LockSupport

    concurrent包是基于AQS (AbstractQueuedSynchronizer)框架的,AQS(JAVA CAS原理.unsafe.AQS)框架借助于两个类: Unsafe(提供CAS操作 ...

  8. 关于使用 symfony 3.4.32中Luckynumber 页面的 route 书写

    关于symfony 3.4.32的安装与配置及第一个页面Luckynumber 的route书写 1.symfony 的安装与配置 symfony官网文档:https://symfony.com/do ...

  9. 07 IO流（四）——文件字节流 FileInputStream/FileOutputStream与文件的拷贝

    两个类的简述 专门用来对文件进行读写的类. 父类是InputStream.OutputStream 文件读入细节 FileOutputStream流的构造方法:new FileOutputStream ...

  10. hadoop 完全分布式搭建总结

    完全分布式--------------- 1.配置文件 [core-site.xml] hdfs 地址 fs.defaultFS=hdfs://s129:8020/ [hdfs-site.xml] 副 ...