诗号:六道同坠,魔劫万千,引渡如来。

/img/bdx/yiyeshu-001.jpg

本文纯粹的链接,列出源码学习过程中重要知识点和功能特性有关的分析链接,这些链接主 要链接到本网站内文章,不排除有外链其他网站。

  1. component 组件使用 <component :is="view.comp"/>

  2. h('div', { ref: childRef }) ref 属性什么时候不会指向 vnode.el

  3. setup(_, ctx) 的第二个参数?

    runtime-core/src/component.ts:createSetupContext()

    最后返回的对象:

    1
    2
    3
    4
    5
    6
    
    {
       attrs: instance.attrs,
       slots: instance.slots,
       emit: instance.emit,
       expose
     }

    setup() 函数被调用的地方: component.ts:setupStatefulComponent

    调用流程:

    renderer.ts:mountComponent -> setupComponent()

    component.ts:setupComponent() -> setupStatefulComponent() -> setup(instance.props, setupContenxt)

    expose 函数:

    1
    2
    3
    4
    5
    6
    
     const expose: SetupContext['expose'] = exposed => {
       if (__DEV__ && instance.exposed) {
         warn(`expose() should be called only once per setup().`)
       }
       instance.exposed = exposed || {}
     }
    

    更详细的过程->

  4. trasition 组件原理分析?

  5. 模板中的资源 URL 是如何识别的,最后又是被编译成啥了?(如: <img src="@img/vue/test.png" />)

  6. TODO component render 函数在哪里执行?

  7. <script setup> 原理和编译过程及结果?

  8. setup 函数如何解析?又是如何执行?

    render -> patch -> processComponent -> mountComponent -> createComponentInstance -> 创建组件实例,初始化组件结构 ->

    setupComponent -> 初始化 props 和 slots,有状态组件处理

    setupStatefulComponent -> 给 instance.ctx 增加代理,执行 setup() 函数

    也就是说在 setup 执行之前 props, emits, slots 都已经可以访问了,并且这个函数 在组 件整个生命周期中只会调用一次,因为后面组件的更新时直接调用 instance.update 来完成,不会进入 mountComponent 。

  9. props ? attrs ? 当给子组件传递属性的时候,哪些在 props 中,哪些在 attrs中?

    比如:

    1
    
    <Child name="child" foo=1 bar=true/>

    name, foo, bar 在 Child 组件中存在哪里了?

    是 props ? attrs ?

  10. vue3 中和 scheduler 任务调度有关的代码!

    讲述了 runtime-core/src/scheduler.ts 中 api 在哪些地方有用到,这些使用的地方 任务执行顺序又是什么❓

    重点更新: 6ebca7d

  11. vue3 事件绑定是如何实现的(stopImmediatePropagation 又是啥?)?

    简述:一个元素一个事件名对应的事件只会绑定一个 listener 及 封装之后的 invoker,此时为了实现原生事件的 stopImmediatePropagation 功能,对 invoker.value 即事件句柄列表里面的所有事件句柄(函数)进行了重写。

  12. vue3 异步任务调度机制 runtime-core->scheduler 是如何实现的?

    vue3 中的异步更新任务分为三种: pre cbs/queue jobs/post cbs,他们的执行都有一 定的先后顺序,点击链接了解更多分析内容。

  13. vue3 diff 原理?

    oldnew更新原则
    [1][1,2,3]append,新增
    [4,5][1,2,3,4,5]append,新增
    [2,3,4][1,2,3,4,5]新增+插入
    [1,2,3,4][2,3,1,4]一次移动
    [1,2,3,4][1,4,2,3]一次移动
    [1,2,3][2,3,1]一次移动
    [1,2,3,4][4,2,3,1]一次移动

    诸如上面的实例是如何实现插入,新增,删除和移动的?

    这里又是如何利用“最长增长序列”来过滤掉不需要移动的节点的?

    简述: 两个 while + if…else if…else

    while1 检测 patch 头部相同节点

    while2 检测 patch 尾部相同节点

    经过两个 while 处理之后剩下的只有不规则的两组(new & old)序列。

    if 执行新增

    else if 执行删除

    else 依照『最长增长序列』算法进行分析,决定是删除还是新增或插入。

    最长增长序列:找到一组序列中路径最长的递增序列,比如:

    2,3,1,4 最长增长序列就是 2,3,4

    剩下的元素只可能比这个序列中的元素值小(如: 1)

    对于不规则的序列对比过程中,会优先查找有 key 的 child, 根据 old child key 去 new children 中找到相同 key 的 new child 来替换这个 old child。

    如果没找到相同 key 的 new child 那这个 old child 将面临被删除的命运。

    如果 old child 也是 unkeyed 那会从 new children 中找到第一个 unkeyed 的 new child 来替换。

    所以总结下来:

    1. while1 同化头部

    2. while2 同化尾部

    3. if 新增

    4. else if 删除

    5. else 不规则序列

      • keyed old child 找 keyed new child,没有 unmount old

      • unkeyed old child 找 unkeyed new child, 没有 unmount old

      • 剩余的 new child 新增

      • 最后根据最长递增序列算法进行移动,前提是需要移动

  14. keep-alive 组件实现原理?

    activate 和 deactivate 状态切换的实际原理是什么?

    ⁉ 通过创建一个 off-dom div 来承接 deactivate 状态下的 DOM 🌲。