关于vue.js:Vue虚拟DOM之snabbdom

什么是虚构 DOM？为什么要应用虚构 DOM？

虚构 DOM（virtual DOM）就是应用 JavaScript 对象来形容 DOM。
原生 JS 或 JQ 操作 DOM 时，浏览器会从构建 DOM 树开始从头到尾执行一遍流程。在一次操作中，我须要更新 10 个 DOM 节点，浏览器收到第一个更新申请后并不知道还有 9 次更新操作，因而会马上执行流程，最终执行 10 次。
应用虚构 DOM 能够先反映在 JS 对象 (虚构 DOM) 上，操作内存中的 JS 对象效率更高，等更新实现后，再将最终的 JS 对象映射成实在的 DOM，交由浏览器去绘制。

snabbdom 的外围

1. 首先 init()函数用来加载模块，并且返回 patch 函数
2. 应用 h()函数创立虚构 DOM 形容的实在 DOM
3. 应用 patch 函数比拟新旧两个 vnode
4. 把变动的 DOM 节点更新到实在 DOM 树

import {init} from 'snabbdom/build/package/init'
import {h} from "snabbdom/build/package/h"

const patch = init([])

// 第一个参数：标签 + 选择器
// 第二个参数：如果是字符串就是标签中的文本内容
let vnode = h('div#container.cls', 'hello world xuquantong')
let app = document.querySelector('#app')

// patch 函数第
// 第一个参数：旧的 vnode, 能够是 DOM 元素,dom 元素会转换成 vnode
// 第二个参数：新的 vnode
// 返回新的 vnode, 也就是第二个参数
let oldVnode = patch(app, vnode)

vnode = h('div#container.xxx', 'hello zhangyanzhen')
patch(oldVnode, vnode)