我要评论1.介绍一下vdom?
- virtual dom， 虚拟dom
- 使用js来模拟dom结构
- dom变化的对比，放在js层来做（图灵完备语言），提高效率
- dom操作非常昂贵（消耗性能）
2.snabbdom的使用
var snabbdom = window.snabbdom;
// 定义patch
var patch = snabbdom.init([
snabbdom_class,
snabbdom_props,
snabbdom_style,
snabbdom_eventlisteners
])
// 定义h
var h = snabbdom.h;
var container = document.getelementbyid('container');
// 生成vnode
var vnode = h('ul#list', {}, [
h('li.item', {}, 'item 1'),
h('li.item', {}, 'item 2'),
]);
patch(container, vnode)
// 修改dom内容
document.getelementbyid('btn-change').addeventlistener('click', function () {
// 生成newvnode
var newvnode = h('ul#list', {}, [
h('li.item', {}, 'item 1'),
// dom节点中不同的地方
h('li.item', {}, 'item b'),
h('li.item', {}, 'item 3'),
]);
patch(vnode, newvnode)
})
[!note]
核心api总结：
- h('<标签名称>', { 属性 }, [子元素])
- h('<标签名>', {属性}， ‘...’)
- patch(container, vnode)
- patch(vnode, newnode)
3.介绍一下diff算法?
3.1 diff算法是什么
- linux中： diff 文件1.txt 文件2.txt
- git中： git diff
- 在线比对工具
3.2 去繁就简
- diff算法实现非常复杂，实现难度很大，源码量很大
- 去繁就简，讲明白核心流程，不关心细节（非常高效的手段）
- 面试官也大部分不清楚细节，但是很关系核心流程的实现
3.3 vdom为何使用diff算法？
- dom操作是昂贵的，因此要尽量减少dom的操作
- 找出本次dom必须更新的节点来更新，其他的不更新
- 这个找出的过程，就需要使用diff算法（找出两个虚拟dom的差异）
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请 点击进行留言回复，万千网友为您解惑！
网友评论