vue核心

why O(n)?

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

how O(n)?

同层级比较

用index做key

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

虚拟dom过程

虚拟 DOM

  1. 什么是虚拟 DOM

    1
    2
    3
    4
    5
    6
    7
    {
    type: 'div',
    props: {
    children: []
    },
    el: xxxx
    }
  2. 怎么创建虚拟 DOM

1
2
-> h 、createElement...
function h(type, props) { return { type, props } }
  1. 使用呢
1
2
3
4
5
6
JSX:
<div>
<ul className='padding-20'>
<li key='li-01'>this is li 01</li>
</ul>
</div>

经过一些工具转一下:

1
2
3
4
5
6
createElement('div', {
children: [
createElement('ul', { className: 'padding-20' },
createElement('li', { key: 'li-01'}, 'this is li 01'))
]
})
  1. 虚拟DOM的数据结构有了,那就是渲染了 (mount/render)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    f(vnode) -> view

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

    parent.insert()
    . insertBefore
    }

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

    <div id='app'></div>
  2. diff 相关了(patch)

    1
    f(oldVnodeTree, newVnodeTree, parent) -> 调度? -> view
zgh wechat
今天扫码,有机会分配一位小哥哥,在线教前端。
请不要给我打赏!