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
XiuerOld wechat
今天扫码，有机会分配一位小哥哥，在线教前端。
请不要给我打赏！