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