1. 首页

Vue3源码解读(二)-mount

• 2020年10月13日 08:23 • 未分类 • 阅读 743

前言

前面讲到了Vue3中mount里面做的事情，其中第一步的mount前面已经讲解了，本篇文章将会从第二步的runtime-core文件夹下面的apiCreateApp文件mount函数开始讲起，依次讲解剩下的几步。按照主流程进行核心代码的解读，跳跃可能会比较大，不过在讲解过程中都会标明是哪个文件。

正文

正文从这开始，mount从此开始。 先来看下源码，前面讲到的dom部分的源码此处不多说，从core部分开始讲起：

packages/runtime-core/src/apiCreateApp.ts


mount(rootContainer: HostElement, isHydrate?: boolean): any {
  if (!isMounted) {
    const vnode = createVNode(
      rootComponent as ConcreteComponent,
      rootProps
    )
    vnode.appContext = context

    if (isHydrate && hydrate) {
      hydrate(vnode as VNode<Node, Element>, rootContainer as any)
    } else {
      render(vnode, rootContainer)
    }
    isMounted = true
    app._container = rootContainer
    ;(rootContainer as any).__vue_app__ = app

    return vnode.component!.proxy
  }
}
//JS中文网 – 前端进阶资源分享 www.javascriptc.com

此处的源代码其实还是很简单的，

  • 调用createVNode获取vnode，rootComponent即为调用createApp(config)的时候传递进来的config数据，rootProps为root props，前面提到过会对此进行校验，一般在使用过程中，rootProps为null；
  • 保存context在跟节点上；
  • 调用渲染函数，此处只讲解render；
  • isMounted置为true；
  • 实例的_container保存为当前rootContainer；
  • rootContainer增加属性vue_app，置为当前app实例；
  • 返回vnode.component的代理。

核心渲染代码为render函数。

render

render函数的作用在Vue2和Vue3中是完全不一样的，

  • Vue2中render函数是做具体工作的，是真正的render操作，返回的结果是vnode，可以在这回顾下Vue2源码解读(七)-mount；
  • Vue3中render函数是做分发工作的，相当于是一个路由器，两条线路，unmount和patch，无返回结果。

来看下render的源码：

packages/runtime-core/src/renderer.ts


const render: RootRenderFunction = (vnode, container) => {
    if (vnode == null) {
        if (container._vnode) {
            unmount(container._vnode, null, null, true)
        }
    } else {
        patch(container._vnode || null, vnode, container)
    }
    flushPostFlushCbs()
    container._vnode = vnode
}
//JS中文网 – 前端进阶资源分享 www.javascriptc.com

上面代码为render函数的源码：

  • 参数1：vnode，是要更新到页面上的vnode，通过上面createVNode获得；container为展现的容器；
  • 先是对vnode进行了判断，如果为空，并且container._vnode有值，也就是有之前的dom渲染，则进行unmount操作；
  • 如果vnode不为空，则进行patch操作，dom diff和渲染；
  • 执行flushPostFlushCbs函数，回调调度器，使用Promise实现，与Vue2的区别是Vue2是宏任务或微任务来处理的
  • 把container的_vnode存储为当前vnode，方便后面进行dom diff操作，此处和Vue2中是一样的。

因为是渲染，vnode不会为空，肯定会走到patch函数部分，来看下patch部分的代码：

packages/runtime-core/src/renderer.ts

const patch: PatchFn = (
    n1, // old
    n2, // new
    container, // 容器
    anchor = null,
    parentComponent = null,
    parentSuspense = null,
    isSVG = false,
    optimized = false
) => {
    // 如果type不相同，则把n1直接卸载掉
    if (n1 && !isSameVNodeType(n1, n2)) {
        anchor = getNextHostNode(n1)
        unmount(n1, parentComponent, parentSuspense, true)
        n1 = null
    }

    if (n2.patchFlag === PatchFlags.BAIL) {
        optimized = false
        n2.dynamicChildren = null
    }

    const {type, ref, shapeFlag} = n2
    switch (type) {
        case Text:
            processText(n1, n2, container, anchor)
            break
        case Comment:
            processCommentNode(n1, n2, container, anchor)
            break
        case Static:
            if (n1 == null) {
                mountStaticNode(n2, container, anchor, isSVG)
            } else if (__DEV__) {
                patchStaticNode(n1, n2, container, isSVG)
            }
            break
        case Fragment:
            processFragment(
                n1,
                n2,
                container,
                anchor,
                parentComponent,
                parentSuspense,
                isSVG,
                optimized
            )
            break
        default:
            if (shapeFlag & ShapeFlags.ELEMENT) {
                processElement(
                    n1,
                    n2,
                    container,
                    anchor,
                    parentComponent,
                    parentSuspense,
                    isSVG,
                    optimized
                )
            } else if (shapeFlag & ShapeFlags.COMPONENT) {
                processComponent(
                    n1,
                    n2,
                    container,
                    anchor,
                    parentComponent,
                    parentSuspense,
                    isSVG,
                    optimized
                )
            } else if (shapeFlag & ShapeFlags.TELEPORT) {
                ;(type as typeof TeleportImpl).process(
                    n1 as TeleportVNode,
                    n2 as TeleportVNode,
                    container,
                    anchor,
                    parentComponent,
                    parentSuspense,
                    isSVG,
                    optimized,
                    internals
                )
            } else if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
                ;(type as typeof SuspenseImpl).process(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized, internals)
            } else if (__DEV__) {
                warn('Invalid VNode type:', type, `(${typeof type})`)
            }
    }

    if (ref != null && parentComponent) {
        setRef(ref, n1 && n1.ref, parentComponent, parentSuspense, n2)
    }
}
复制代码

已上门patch函数为入口进行梳理分析，得到了下面的图，在其中有几条比较常用的线路：

  • processFragment：处理片段(dom数组)的函数；
  • processElement：处理元素的函数；
  • processComponent：处理组件的函数； Vue3源码解读(二)-mount 接下来我们将会研究一个例子，会涉及到processFragment和processElement，做一个dom的diff操作；

render例子

我们现在将从头到尾开始讲解一个例子，将会从头到尾，一步步讲解用到的函数。假如现在有一个列表：

packages/vue/examples/classic/hello.js

 js
const app = Vue.createApp({
    data() {
        return {
            list: ['a', 'b', 'c', 'd']
        }
    }
});
app.mount('#demo')
//JS中文网 – 前端进阶资源分享 www.javascriptc.com

packages/vue/examples/classic/hello.html

 html
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport"  content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,
    user-scalable=no,target-densitydpi=medium-dpi,viewport-fit=cover"/>
    <title>Vue3.js hello example</title>
    <script src="../../dist/vue.global.js"></script>
</head>
<body>
<div id="demo">
    <ul>
        <li v-for="item in list" :key="item">
            {{item}}
        </li>
    </ul>
</div>
<script src="./hello.js"></script>
</body>
</html>
//JS中文网 – 前端进阶资源分享 www.javascriptc.com

我们在Vue3源代码的根目录，对应的目录下面新建hello.js和hello.html两个文件，把上面代码复制到对象文件中，然后到根目录运行npm run dev，好了，现在项目跑起来了。然后打开浏览器，输入url地址： file:///Users/draven/mywork/vue-3.0.0/packages/vue/examples/classic/hello.html ；可以看到页面的渲染：

Vue3源码解读(二)-mount

进行到这里，就是成功的了，我们下一步研究页面上的效果是如何运行出来的，从上面的render函数说起。

  • 1、开始运行：调用render(vnode, rootContainer)，该函数的运行位置位于packages/runtime-core/src/apiCreateApp.ts，render函数的声明位于packages/runtime-core/src/renderer.ts；参数vnode为上面调用createVNode所生成的，参数rootContainer就是我们上面传进来的id为demo的元素；

  • 2、接下来进入的是packages/runtime-core/src/renderer.ts文件，接下来的功能大部分都在这个文件里面，如有特殊情况会进行说明。

  • 3、接下来运行：在render函数内部调用patch(container._vnode || null, vnode, container)

    • 3.1、第一个参数为老的vnode，因为是首次渲染，老的vnode是不存在的，所以为null；第二个参数就是透传的vnode；第三个参数为透传的container(#demo)；
    • 3.2、patch函数还接受其他参数，不过咱们暂时用不到：patch(n1, n2, container, anchor = null, parentComponent = null, parentSuspense = null, isSVG = false, optimized = false);n1即为null，n2即为要更新的vnode，container为透传#demo;
    • 3.3、此时的n1为null，n2目前还是一个对象： Vue3源码解读(二)-mount 此时的判断会符合shapeFlag & ShapeFlags.COMPONENT,走到processComponent(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized)函数；此时参数的值是：n1为null，n2如图所示，container为#demo;

  • 4、processComponent函数会进行对n1的判断，n1不为null，则证明是更新操作，调用updateComponent；此时，我们是首次渲染，所以不会走更新操作，走另外一个逻辑；如果为keepAlive的类型的组件，走activate逻辑；此时，我们不为keepalive的组件，所以走mountComponent函数，mountComponent(n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized)，参数n2为上图，container为#demo，其他的参数目前还都是默认null(false)值；

  • 5、mountComponent函数会首先调用createComponentInstance生成对当前n2的实例，然后调用setupComponent初始化props和slots等，最终调用setupRenderEffect(instance, initialVNode, container, anchor, parentSuspense, isSVG, optimized )，参数instance为上面生成的实例，initialVNode还是为上图n2,container为#demo，其他为默认值；

  • 6、setupRenderEffect函数是一个非常核心的函数，此函数将会为当前实例挂载上update方法，update方法是通过effect生成的，effect在Vue3中的作用就相当于Vue2中的observe；update生成后，挂载之前会先运行一下生成的effect方法，最后返回当前effect方法给update；运行effect函数就相当于Vue2中watcher调用get的过程.effect接受两个参数，第一个参数就是componentEffect函数，也就是监听变化调用此函数；上面讲到先运行一下生成的effect方法，生成的effect方法内部就会调用这个componentEffect函数；

  • 7、componentEffect函数有两个逻辑，判断是否已经渲染：instance.isMounted；如果已经渲染，则走更新逻辑；咱们还未渲染，则走未渲染的逻辑；来看下这部分的源码。

    function componentEffect() {
      if (!instance.isMounted) {
        let vnodeHook: VNodeHook | null | undefined
        const {el, props} = initialVNode
        const {bm, m, parent} = instance

        // beforeMount hook
        if (bm) {
            invokeArrayFns(bm)
        }
        // onVnodeBeforeMount
        if ((vnodeHook = props && props.onVnodeBeforeMount)) {
            invokeVNodeHook(vnodeHook, parent, initialVNode)
        }
        const subTree = (instance.subTree = renderComponentRoot(instance))

        if (el && hydrateNode) {
            hydrateNode(
                initialVNode.el as Node,
                subTree,
                instance,
                parentSuspense
            )
        } else {
            patch(
                null,
                subTree,
                container,
                anchor,
                instance,
                parentSuspense,
                isSVG
            )
            initialVNode.el = subTree.el
        }
        if (m) {
            queuePostRenderEffect(m, parentSuspense)
        }
        if ((vnodeHook = props && props.onVnodeMounted)) {
            queuePostRenderEffect(() => {
                invokeVNodeHook(vnodeHook!, parent, initialVNode)
            }, parentSuspense)
        }
        const {a} = instance
        if (
            a &&
            initialVNode.shapeFlag & ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE
        ) {
            queuePostRenderEffect(a, parentSuspense)
        }
        instance.isMounted = true
      } else {
        // no first render
      }
    }
    //JS中文网 – 前端进阶资源分享 www.javascriptc.com

上面是整理后的第一次渲染的`componentEffect`函数源码；
    • 7.1、先调用了当前实例的beforeMount钩子函数；
    • 7.2、调用n2的父类的BeforeMount钩子函数；
    • 7.3、调用renderComponentRoot函数进行渲染组件的根元素；
    • 7.4、调用patch：patch(null, subTree, container, anchor, instance, parentSuspense, isSVG);此时subtree的值为：；container为#demo；anchor为null，instance为当前实例，parentSuspense为null，isSVG为false；
    • 7.5、调用当前实例的mounted钩子函数；调用n2的父类的mounted钩子函数；调用当前实例的activated钩子函数；不是直接调用，而是通过queuePostRenderEffect放到队列中去调用；
    • 7.6、最终把实例的isMounted置为true；

  • 8、上面componentEffect函数中调用patch才是正式渲染的开始，前面大部分都是相当于数据的整理：

    • 8.1、按照上面componentEffect函数的运行参数传递到patch函数：patch(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG, optimized)；此时n1为null，n2为上图(subtree)，container还是#demo，anchor为null，parentComponent为上面的instance实例，parentSuspense为null，isSVG为false，optimized为false；
    • 8.2、代码依次执行，通过上图可以看到，component获取到的实例的subtree的type为Fragment，则会走到processFragment函数；
    • 8.3、processFragment接受的参数和patch函数接受的参数是一样的，还是上面的值，无变化，来看下源码：
          const processFragment = (
              n1: VNode | null,
              n2: VNode,
              container: RendererElement,
              anchor: RendererNode | null,
              parentComponent: ComponentInternalInstance | null,
              parentSuspense: SuspenseBoundary | null,
              isSVG: boolean,
              optimized: boolean
          ) => {
              const fragmentStartAnchor = (n2.el = n1 ? n1.el : hostCreateText(''))!
              const fragmentEndAnchor = (n2.anchor = n1 ? n1.anchor : hostCreateText(''))!
              let {patchFlag, dynamicChildren} = n2
              if (patchFlag > 0) {
                  optimized = true
              }
              if (n1 == null) {
                  hostInsert(fragmentStartAnchor, container, anchor)
                  hostInsert(fragmentEndAnchor, container, anchor)
                  mountChildren(
                      n2.children as VNodeArrayChildren,
                      container,
                      fragmentEndAnchor,
                      parentComponent,
                      parentSuspense,
                      isSVG,
                      optimized
                  )
              } else {
                 // 其他逻辑
              }
          }
        //JS中文网 – 前端进阶资源分享 www.javascriptc.com

    根据参数可以知道会走到当前if逻辑，会先插入骨架；然后执行`mountChildren`，n2.children通过上面的subtree可以知道，值为一个数组，数组里面有1个元素，就是咱们要渲染的ul；

        const mountChildren: MountChildrenFn = (
            children,
            container,
            anchor,
            parentComponent,
            parentSuspense,
            isSVG,
            optimized,
            start = 0
        ) => {
            for (let i = start; i < children.length; i++) {
                const child = (children[i] = optimized
                    ? cloneIfMounted(children[i] as VNode)
                    : normalizeVNode(children[i]))
                patch(
                    null,
                    child,
                    container,
                    anchor,
                    parentComponent,
                    parentSuspense,
                    isSVG,
                    optimized
                )
            }
        }
        //JS中文网 – 前端进阶资源分享 www.javascriptc.com

    可以看到将会对n2.children进行遍历，n2.children只有一个元素，是ul

+ + 8.4、使用上面的运行时的参数，调用patch(n1, n2, container, anchor, parentComponent, parentSuspense, isSVG = false, optimized)；参数：n1为null；child为上面提到的ul；container为#demo，anchor为上面processFragment函数里面的fragmentEndAnchor；parentComponent为instance实例；parentSuspense为null；isSVG为false；optimized为true，因为在上面processFragment里面进行了改变；
+ + 8.5、由上面参数可知，ul的类型为ul，此时会走到processElement函数，processElement函数的参数和patch函数的参数是一样的，进行了透传，看下源代码：

        const processElement = (
            n1: VNode | null,
            n2: VNode,
            container: RendererElement,
            anchor: RendererNode | null,
            parentComponent: ComponentInternalInstance | null,
            parentSuspense: SuspenseBoundary | null,
            isSVG: boolean,
            optimized: boolean
        ) => {
            isSVG = isSVG || (n2.type as string) === 'svg'
            if (n1 == null) {
                mountElement(
                    n2,
                    container,
                    anchor,
                    parentComponent,
                    parentSuspense,
                    isSVG,
                    optimized
                )
            } else {
                patchElement(n1, n2, parentComponent, parentSuspense, isSVG, optimized)
            }
        }
        //JS中文网 – 前端进阶资源分享 www.javascriptc.com

JS中文网 – 前端进阶资源教程 www.javascriptC.com
一个致力于帮助开发者用代码改变世界为使命的平台，每天都可以在这里找到技术世界的头条内容 

    根据参数n1为null可以知晓，会走到mountElement的逻辑，参数不会发生改变。执行mountElement的过程中会检测ul的children，发现ul的children下面有值，则会调用mountChildren函数:

        mountChildren(
            vnode.children as VNodeArrayChildren,
            el,
            null,
            parentComponent,
            parentSuspense,
            isSVG && type !== 'foreignObject',
            optimized || !!vnode.dynamicChildren
        )
        //JS中文网 – 前端进阶资源分享 www.javascriptc.com

    此时vnode.children为由4个li组成的数组；el为ul，anchor为null，parentComponent为instance实例；parentSuspense为null；isSVG为false；optimized为true；重复上面mountChildren函数；

+ + 8.6、mountChildren函数里面进行for循环的时候，li的type为li，则会继续走到processElement,重复上面步骤，依次执行完成；
+ 9、上面所有的步骤执行完成，现在数据已经呈现到页面上了。

  • 10、此时基本所有的事情都干完了，也就是相当于主队列空闲了，调用flushPostFlushCbs()开始执行队列里面的函数;

  • 11、最后把container的_vnode属性指向当前vnode；方便下次做dom diff使用。

  • 12、第一次渲染运行完成。

结语

本章着重降了first render的渲染过程，下一章会像按照本章的节奏结合Vue2源码解读(七)中的dom diff部分对Vue3中的patch部分进行讲解，慢慢把它们都消化掉。

作者：德莱问
链接：https://juejin.im/post/6883072260123394061

看完两件小事

如果你觉得这篇文章对你挺有启发，我想请你帮我两个小忙：

  1. 关注我们的 GitHub 博客，让我们成为长期关系
  2. 把这篇文章分享给你的朋友 / 交流群，让更多的人看到，一起进步，一起成长！
  3. 关注公众号 「画漫画的程序员」，公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程

JS中文网是中国领先的新一代开发者社区和专业的技术媒体,一个帮助开发者成长的社区，目前已经覆盖和服务了超过 300 万开发者，你每天都可以在这里找到技术世界的头条内容。欢迎热爱技术的你一起加入交流与学习,JS中文网的使命是帮助开发者用代码改变世界

本文著作权归作者所有，如若转载，请注明出处

转载请注明：文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com

标题：Vue3源码解读(二)-mount

链接：https://www.javascriptc.com/4085.html

赞 (0)
打赏 微信扫一扫 微信扫一扫
0
« Vue3源码解读(三)-patch
Vue3响应式原理剖析»
Flutter 中文教程资源

相关推荐

QR code