我一直在思考, 写博客是为了什么?终于有一天我想明白了: 思考, 表达, 交友。
问: vdom是什么?为什么存在?
- 用js模拟dom结构。
- dom发生变化的对比,放在js层做。
- 提高重绘的性能
js是图灵完备语言,能实现各种逻辑和算法的语言。
存在的理由:
- dom操作是非常昂贵的
- js的运行效率是非常高的
jquery 中操作dom的渲染案例:
var $idBtn = $('.id-btn');
function render(data) {
var $container = $('.container');
$container.html('')
var $table = $('<table>')
$table.append($('<tr><td>姓名</td><td>年龄</td><td>地区</td></tr>'))
data.forEach(item => {
$table.append($(`<tr><td>${item.name}</td><td>${item.age}</td><td>${item.add}</td></tr>`))
})
$container.append($table)
}
$idBtn.click(function() {
data[0].name = '赵四',
data[1].age = '10'
render(data)
})
render(data)
问: 如何使用?核心api是什么?
vue 和 vdom 是借用了snabbdom来实现的。
github: https://github.com/snabbdom/snabbdom
下面介绍一下snabbdom的简单使用
- 引入snabbdom的js文件
- 初始化snabbdom的patch和h函数
- 创建虚拟vdom
- 第一次把vdom渲染到页面
- 建立新的vdom,newVdom
- 然后把newVdom和vdom进行对比
- 最后只改变修改的dom
代码如下:
<body>
<div class="container"></div>
<button type="button" name="button" class="btn">change</button>
<script src="https://cdn.bootcss.com/snabbdom/0.7.2/snabbdom.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.2/snabbdom-class.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.2/snabbdom-eventlisteners.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.2/snabbdom-props.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.2/snabbdom-style.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.2/h.js"></script>
<script>
var container = document.querySelector('.container')
var btn = document.querySelector('.btn')
var patch = snabbdom.init([
snabbdom_class,
snabbdom_props,
snabbdom_style,
snabbdom_eventlisteners
])
var h = snabbdom.h
var vdom = h('ul#list', {}, [
h('li.item', {}, 'ITEM1'),
h('li.item', {}, 'ITEM2')
])
patch(container, vdom)
btn.addEventListener('click', function() {
var newVdom = h('ul#list', {}, [
h('li.item', {}, 'ITEM1'),
h('li.item', {}, 'ITEMB'),
h('li.item', {}, 'ITEM3')
])
patch(vdom, newVdom)
})
</script>
</body>
问: 介绍一下diff算法?
1、什么是diff算法?
diff 算法是用来对比两个文件有哪里不同的,是linux的以及基础的命令。
2、Vdom为什么要用diff算法?
- dom操作是昂贵的
- 找本次修改的dom,其他的节点不动
- 找出的过程就是diff算法
3、diff算法核心流程?
- 如何用vnode生成一个dom的节点?
- patch方法
- patch(container, vnode)
- patch(vnode, newVnode)
- vnode和newVnode的对比
- 修改改变的dom节点
- replacechildren
- createElement