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. SUBLIME必备插件FOR PHP

    Sublime Text真是一款写代码的利器,轻巧快捷,而且功能强大,用来写PHP代码再好不过了,告别以前用的笨重臃肿的Zend Studio,感觉一身轻松,PHP代码也更加优雅.但是PHP开发也经常 ...

  2. DNS寻址以及IP解析

    域名解析从右向左 DNS寻址: 1 客户端发送查询请求,在本地计算机缓存查询,若没有找到,就会将请求发送给dns服务器 2 先发送给本地的dns服务器,现在自己的区域内查找,若找到,根据此记录进行查询 ...

  3. vue-cli3使用vue-router 使用动态路由，在刷新页面时报错

    刚发现的一个问题,在使用vue-cli3创建项目之后,使用动=动态路由,demo: { path: '/aa/:id', name: 'aa', component: aa }, 编程式路由: thi ...

  4. iOS 多线程的简单理解（4） 线程锁的简单使用

    要用到多线程 ,就不得不考虑,线程之间的交互,线程是否安全 推荐一个原文链接 是关于 线程锁的基本使用的  http://blog.csdn.net/qq_30513483/article/detai ...

  5. nginx 配置参数详细说明

    #定义Nginx运行的用户和用户组 user www www; # #nginx进程数,建议设置为等于CPU总核心数. worker_processes 8; # #全局错误日志定义类型,[ debu ...

  6. linux软件安装习惯

    Linux 的软件安装目录是也是有讲究的,理解这一点,在对系统管理是有益的 /usr:系统级的目录,可以理解为C:/Windows/,/usr/lib理解为C:/Windows/System32./u ...

  7. NetworkX一个图论与复杂网络建模工具

    NetworkX是一个图论与复杂网络建模工具,采用Python语言开发,内置了常用的图与复杂网络分析算法,可以方便的进行复杂网络数据分析.仿真建模等工作.(1)NetworkX支持创建简单无向图.有向 ...

  8. [ClickOnce] - Win10 管理员模式下无法安装 ClickOnce 之解决

    Issue Windows 10 管理员模式下,点击 ClickOnce 安装程序无反应. 解决 1. 按 WIN+R 键打开“运行”窗口,输入 “gpedit.msc" 打开组策略.2.  ...

  9. iphone订阅服务在那里取消

    打开手机,找到设置,点击进去   往下拉,找到“APP Store与iTunes Store”点击进去,找到你的ID,再点击进去,输入你的密码   找到“订阅”这个选项,点击进去   进到里面后你会发 ...

  10. 【LEETCODE】33、LeetCode的Given a non-negative integer numRows, generate the first numRows of Pascal's triangle

    package y2019.Algorithm.array; import java.util.ArrayList; import java.util.List; /** * @ProjectName ...