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. Cas（03）——Cas Server中各配置文件介绍

    Cas Server中各配置文件介绍 Cas Server中所有的配置文件都是放在WEB-INF目录及其子目录下的. 在WEB-INF/classes下的配置文件有: l  cas-theme-def ...

  2. CF1277D Let's Play the Words?

    思路: 字符串其实只有0...0, 0...1, 1...0, 1...1四种. 实现: #include <bits/stdc++.h> using namespace std; ]; ...

  3. 找出整数数组中出现次数超过数组长度一半的元素（Java）

    Question:数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字 package com.study.zhipengs.test; import java.util.Arrays; im ...

  4. Spring切面编程AOP

  5. KEGG富集分析散点图.md

    输入数据格式 pathway = read.table("kegg.result",header=T,sep="\t") pp = ggplot(pathway ...

  6. 怎么对10亿数据量级的mongoDB作高效的全表扫描

    转自:http://quentinxxz.iteye.com/blog/2149440 一.正常情况下,不应该有这种需求 首先,大家应该有个概念,标题中的这个问题,在大多情况下是一个伪命题,不应该被提 ...

  7. java后台面试之计算机网络问题集锦

    1.http和https的区别 2.对称加密和非对称加密 3.三次握手与四次挥手的流程 4.为什么TCP需要三次握手?两次不可以吗?为什么 5.为什么TCP挥手需要四次?三次不行吗? 6.TCP协议如 ...

  8. 025 Android 带进度条的对话框(ProgressDialog)

    1.ProgressDialog介绍 ProgressDialog可以在当前界面弹出一个置顶于所有界面元素的对话框,同样具有屏蔽其他控件的交互能力,用于提示用户当前操作正在运行,让用户等待: 2.应用 ...

  9. Linux下查看压缩文件内容的 10 种方法

    Linux下查看压缩文件内容的 10 种方法 通常来说,我们查看归档或压缩文件的内容,需要先进行解压缩,然后再查看,比较麻烦.今天给大家介绍 10 不同方法,能够让你轻松地在未解压缩的情况下查看归档或 ...

  10. [.Net Core] - Asp.Net Core 编译成功，发布失败之解决

    背景 Asp.Net Core 项目编译成功,发布失败. 错误 Assets file 'D:\……\obj\project.assets.json' doesn't have a target fo ...