vue 中 diff中的key

vue中的diff 离不开 sbabbdom

页面每一次更新diff将会使页面最小量更新，key就是节点的唯一标识，告诉diff，在更改前后透明是同一个DOM节点。

const vnode1 = h('div', {}, [
	h(
		'p',
		{
			key: '1'
		},
		'A'
	),
	h('p', { key: '2' }, 'B'),
	h('p', { key: '3' }, 'C'),
	h('p', { key: '4' }, 'D')
])
let container = document.querySelector('#container')
let btn = document.querySelector('#btn') // 点击按钮页面更新
patch(container, vnode1)
let vnode2 = h('div', {}, [
	h('p', { key: '5' }, 'E'),
	h('p', { key: '1' }, 'A'),
	h('p', { key: '2' }, 'B'),
	h('p', { key: '3' }, 'C'),
	h('p', { key: '4' }, 'D')
])
btn.onclick = function () {
	patch(vnode1, vnode2)
}

再最终的结果显示，A ,B ,C ,D 并不会被更新，这样就做到了最小量更新。

同时，只有是同一个虚拟节点，才进行精细化比较，也就是拥有相同的key，否则就会暴力的 删除，插入等。
只能进行同层比较，不会跨层比较，比如 父节点 更改等。