vdom,diff,key 算法的瞭解

< ul id= 'list' >

< li class= 'item' >Item1 </ li >

< li class= 'item' >Item2 </ li >

</ ul >

 

 

var tag = {

tag: 'ul',

attrs: {

id: 'list'

},

children: [

{

tag: 'li',

attrs: {

className: 'item'

},

children: [ 'Item1']

},

{

tag: 'li',

attrs: {

className: 'item'

},

children: [ 'Item1']

}

]

}

 

/**

* vdom如何使用，snabbdom的實現vdom的庫

* h函數，patch函數

* vue在官方文檔中提到與react的渲染性能對比中，由於其使用了snabbdom而有更優異的性能。

*/

snabbdom是一個Virtual - DOM的實現庫， 它專一於使用的簡單以及功能和的模型化， 並在效率和性能上有着很好的表現。 若是你還不知道什麼是Virtual - DOM技術， 它是一種網頁中經過diff算法來實現網頁修改最小化的方法，

react底層使用了這樣的機制來提升性能。 從Vue2發佈開始， 也開始使用了這樣的機制。 Vue並無選擇本身從新造一套Virtual - DOM的算法， 而是在snabbdom的基礎上構建了一個嵌入了框架自己的fork版本。

能夠說， Vue就是在使用snabbdom的Virtual - DOM算法。

/**

* 基本的算法實現使用過程 diff,

*/

// 1、

patch( containter, vnode);

// 怎麼將vnode生成真實的DOM

function creatElement( vnode) {

var tag = vnode. tag;

var attrs = vnode. attrs || {};

var children = vnode. children || [];

if (! tag) return null;

// 建立元素

var elem = document. createElement( tag);

var attrName;

for ( attrName in attrs) {

if ( attrs. hasOwnProperty( attrName)) {

elem. setAttribute( attrName, attrs[ attrName]);

}

}

// 子元素

children. forEach( childnode => {

elem. appendChild( creatElement( childnode));

});

return elem;

}

// 2、找出差別

patch( vnode, newVnode);

// 若是二個元素類型不一樣、key值不一樣，那麼認爲他們是不一樣的元素，直接用新的元素替換前一個

function updateChildren( vnode, newVnode) {

var children = vnode. children || [];

var newChildren = newVnode. children || [];

children. forEach( function ( child, index) {

var newChild = newChildren[ index];

if ( newChild == null) {

return;

}

if ( child. tag === newChild. tag) {

// 若是二個同樣使用遞歸

updateChildren( child, newChild);

} else {

// 若是兩者不相等

replaceNode( child, newChild);

}

});

}

// 替換的操做

function replaceNode( vnode, newVnode) {

var elem = vnode. elem;

var newElem = creatElement( newVnode);

// 替換

}

 

   

/**

* v-if:條件語句，它確保在切換過程當中條件內的事件監聽和子組件適當的銷燬和重建

* 是惰性的，若是條件爲假的時候，什麼也不作，只有爲真的的時候，纔開始渲染條件塊

* ，有更高的切換開銷.

* v-show:無論條件是什麼，元素總會被渲染，而且只是基於css進行切換

* 通常來講，v-if具備更高的切換開銷，v-show具備更高的渲染開銷，若是頻繁的

* 切換v-show較好，若是在運行時條件不多改變，則使用V-if,

*/

// key的做用：

// 在react中key--是用來幫助 react 識別哪些內容被更改、添加或者刪除