snabbdom 和 virtual dom

提升性能，虚拟dom其实就是把dom数据化 eg：documentFragment

搭建环境

npm init -y cnpm install webpack@5 webpack-cli@3 webpack-dev-server@3 -S cnpm install sanbbdom -S 新建webpack.config.js 配置webpack.config.js module.exports={ entry:{ index:'./src/index.js' }, output:{ path:__dirname+'./public', filename:'./js/[name].js' }, devServer:{ contentBase:'./public', inline:true } }

虚拟节点和是真实节点

虚拟节点： { children:undefined, data:{}, key:undefined， sel:"h1", elm:h1, text:'你好' } 真实节点：

你好

### 新老节点替换规则 1.如果新老节点不是同意节点名称，直接就是暴力删除旧节点，插入新节点 ***注意 ：如果要提升性能一定要加入key,key是唯一标识，在更改前后看是否为同一节点 2.只能同级比较，不能跨层比较，如果跨层就暴力删除节点创建新节点插入 ` const vnode1=h('ul',{},[ h('li',{key:'a'},'a'), h('li',{key:'b'},'b'), ]) const vnode2=h('ul',{},[ h('li',{key:'a'},'a'), h('li',{key:'b'},'b'), h('li',{key:'c'},'c'), ]) ` h()是渲染函数 利用patch函数进行替换 patch(vnode1,vnode2)

如何生成虚拟dom

export default function（sel,data,params）{ //h函数的第三个参数是字符串类型说明没有子元素 if(typeof params=='String'){ return vnode(sel,data,undefined,params,undefined) } else if(Array.isArray(params)){ for(let item of params){ children.push(item) } return vnode(sel,data,children,undefined,undefined) } }