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. 【Leetcode_easy】897. Increasing Order Search Tree

    problem 897. Increasing Order Search Tree 参考 1. Leetcode_easy_897. Increasing Order Search Tree; 完

  2. Linux_高级用法

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

  3. docker安装MongoDB创建用户，并用工具Robo连接简单CRUD

    搜索mongo docker search mongo 拉取mongo[这里默认为latest] docker pull mongo 查看本地镜像 启动容器[就是安装,-v后面的参数表示把数据文件挂载 ...

  4. 虚拟机中使用Samba实现文件共享

    首先我们给虚拟机安装samba服务(如果搭的是别的仓库记得开仓库) 输入命令:yum install samba samba服务的配置文件在,我们来看一下/etc/samba/smb.conf 输入命 ...

  5. 乐字节Java继承|方法重写、super和final关键字

    大家好,乐字节的小乐又来了,上一篇是:乐字节Java|JavaBean.继承与权限修饰,也是属于Java继承的,今天继续Java继承. 一. 方法的重写 父类不满足子类的要求,按需改写.注意 方法签名 ...

  6. npm use local module

    情况是这样的, 我一个Angular的项目和一个微信小程序要共用逻辑, 于是我就把它剥离出来一个Node类库, Angular倒是可以使用Reference去引用, 但是使用uniapp创建的微信小程 ...

  7. LeetCode 20. 有效的括号(Valid Parentheses)

    20. 有效的括号 20. Valid Parentheses 题目描述 给定一个只包括 '(',')','{','}','[',']' 的字符串,判断字符串是否有效. 有效字符串需满足: 左括号必须 ...

  8. JUC之原子类

    在分析原子类之前,先来了解CAS操作 CAS CAS,compare and swap的缩写,中文翻译成比较并交换. CAS 操作包含三个操作数 —— 内存位置(V).预期原值(A)和新值(B).如果 ...

  9. DjangoRestful 递归嵌套序列化器实现

    **** 由于博客园不支持markdown语法,所以推荐以下链接阅读: 原创 https://blog.csdn.net/weixin_42495873/article/details/8943354 ...

  10. Go实战--golang中使用redis(redigo和go-redis/redis)

    开源库redigo的使用 github地址: https://github.com/garyburd/redigo 文档地址: http://godoc.org/github.com/garyburd ...