vue核心
why O(n)?
严格意义不是真的O(n),复杂度其实是O(nm)
how O(n)?
同层级比较
用index做key
vue: [0,1,2],[0,1] 误删 react: 会重新渲染 都是新建
虚拟dom过程
虚拟 DOM
什么是虚拟 DOM
{
type: 'div',
props: {
children: []
},
el: xxxx
}怎么创建虚拟 DOM
-> h 、createElement...
function h(type, props) { return { type, props } }- 使用呢
JSX:
<div>
<ul className='padding-20'>
<li key='li-01'>this is li 01</li>
</ul>
</div>经过一些工具转一下：
createElement('div', {
children: [
createElement('ul', { className: 'padding-20' },
createElement('li', { key: 'li-01'}, 'this is li 01'))
]
})虚拟DOM的数据结构有了，那就是渲染了 (mount/render)
f(vnode) -> view
f(vode) {
document.createElement();
....
parent.insert()
. insertBefore
}
export const render = (vnode, parent) => { }
<div id='app'></div>diff 相关了(patch)
f(oldVnodeTree, newVnodeTree, parent) -> 调度? -> view本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-06-21，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录