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,

*/

// 一、

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;

}

// 二、找出差异

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