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 识别哪些内容被更改、添加或者删除