vDom和domDiff

Posted 2021-03-22 pengdt

虚拟dom和domDiff

1. 构建虚拟DOM
var tree = el('div', {'id': 'container'}, [
    el('h1', {style: 'color: blue'}, ['simple virtal dom']),
    el('p', ['Hello, virtual-dom']),
    el('ul', [el('li')])
])

2. 通过虚拟DOM构建真正的DOM
var root = tree.render()
document.body.appendChild(root)

3. 当数据发生变化，生成新的虚拟DOM
var newTree = el('div', {'id': 'container'}, [
    el('h1', {style: 'color: red'}, ['simple virtal dom']),
    el('p', ['Hello, virtual-dom']),
    el('ul', [el('li'), el('li')])
])

4. 比较两棵虚拟DOM树的不同
var patches = diff(tree, newTree)

5. 在真正的DOM元素上应用变更
patch(root, patches)

难点就在于比较diff
给你两个数组，数组里装着几个对象，对比这两个数组的区别，首先需要考虑的是什么，==顺序，也就是复用性==，因为dom里有子元素，如果能移动位置，就优先移动位置，对比之后，没有的就删了，在把新的添加就行，但是，但是对比对象的成本非常的高，我要对比两个对象是不是同一个要对比name，对比age，对比很多的值，才能知道这个是原本的第一个值现在变到第三个了，如何减少对比，用key，用对象里不变的量做对比，因为有key，所以对象级别的对比就变成了字符串数组级别的对比，这也是vue的优化方案之一，如何对比字符串数组的diff，往下看

// 列表对比，主要也是根据 key 值查找匹配项
// 对比出新旧列表的新增/删除/移动
function diffList(oldList, newList, index, pathchs) {
    let change = []
    let list = []
    const newKeys = getKey(newList)
    oldList.map(v => {
     if (newKeys.indexOf(v.key) > -1) {
         list.push(v.key)
     } else {
         list.push(null)
     }
    })
    // 标记删除
    for (let i = list.length - 1; i>= 0; i--) {
     if (!list[i]) {
        list.splice(i, 1)
        change.push({ type: 'remove', index: i })
     }
    }
    // 标记新增和移动
    newList.map((item, i) => {
     const key = item.key
     const index = list.indexOf(key)
     if (index === -1 || key == null) {
         // 新增
         change.push({ type: 'add', node: item, index: i })
         list.splice(i, 0, key)
     } else {
         // 移动
         if (index !== i) {
             change.push({
                 type: 'move',
                 form: index,
                 to: i,
             })
             move(list, index, i)
         }
     }
    })
    return { change, list }
}

更新
新增的新增，删除的删除的，移动的先移动，再对比移动的数据的标签值的变化，比如值的变化，class的变化，内容的变化等等，之后还要递归执行子一级的变化，才能完成一次domDiff

理想化
上面说的只是理想化的对比，如果我不设置key呢，vue会自己设置，就比如vue的dom上个特殊的id，那vue能自己设置还要我们设置干什么，他设置需要去生成uuid之类的id，是需要成本的

参考资料
domDiff第一篇
domDiff第二篇
domDiff第三篇
domDiff第四篇
domDiff第五篇
domDiff第六篇
domDiff第七篇