vue核心

why O(n)?

严格意义不是真的O(n),复杂度其实是O(nm)

how O(n)?

同层级比较

用index做key

vue: [0,1,2],[0,1] 误删 react: 会重新渲染 都是新建

虚拟dom过程

虚拟 DOM

什么是虚拟 DOM

代码语言：javascript复制

{
 type: 'div',
 props: {
 children: []
 },
 el: xxxx
}

怎么创建虚拟 DOM

代码语言：javascript复制

-> h 、createElement...
function h(type, props) { return { type, props } }

1. 使用呢

代码语言：javascript复制

JSX:
<div>
 <ul className='padding-20'>
   <li key='li-01'>this is li 01</li>
 </ul>
</div>

经过一些工具转一下：

代码语言：javascript复制

createElement('div', {
 children: [
   createElement('ul', { className: 'padding-20' },
   createElement('li', { key: 'li-01'}, 'this is li 01'))
 ]
})

虚拟DOM的数据结构有了，那就是渲染了 (mount/render)

代码语言：javascript复制

f(vnode) -> view

f(vode) {
document.createElement();
....

parent.insert()
. insertBefore
}

export const render = (vnode, parent) => {  }

<div id='app'></div>

diff 相关了(patch)

代码语言：javascript复制

f(oldVnodeTree, newVnodeTree, parent) -> 调度? -> view

渲染 数据结构 dom key 工具

0 人点赞