VDOMとdomDiff

仮想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)

差分を比較する上での難しさの嘘は、
サブDOMがあるので、再利用性==、==順序が何であるかを検討するあなたの最初の必要性は、これらの2つのアレイ間の違いを比較、次の2つのアレイ、いくつかのオブジェクトで満たさ配列をしている与えますと同じではありません、私は2つのオブジェクトを比較したい、我々は位置を移動させる優先順位に、場所を移動することができた場合の要素は、その後、コントラスト、しかし、ライン上の新しいアドオンで、削除する必要はありませんが、コントラストの目標コストは非常に高く、コントラストの名前、年齢の比較、これは本来の最初の値が、今でコントラストを削減する方法を、3分の1に変更されているかどうかを知るために、値の多くを比較するkeyキーがあるので、そう、同じ内のオブジェクトの量との比較を行い、オブジェクトレベルの比較が比較文字列配列レベルとなり、これは差分文字列配列、ルックダウンを比較する方法、最適化プログラムVUEの一つであります

// 列表对比，主要也是根据 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 }
}

更新する
、ように含有量の変化と、そのようなクラスの変更の価値の変動としてタグデータ移動の値に比べて変化を、新規追加を削除、削除、最初の動きを移動し、その後、それらが再帰的に子供を行いますdomDiffを完了するために、レベルの変化

理想的なは
彼がセットを生成するために必要なものだけコントラストを理想化私は、キーを設定しない場合は、VUEは、特別なIDでDOMに、このようなVUEなど、自分自身を設定します、それはまた、独自のセット私たちを設定することができVUEと言いますIDは、UUIDと同様、コストです

参照は
最初のポストdomDiff
第domDiff
domDiffタイトルIII
domDiffタイトルIV
domDiff第五章
 domDiffタイトルVI
domDiff VIIを

おすすめ