Vue3是如何进行页面渲染的?

前端 潘老师 3个月前 (11-22) 67 ℃ (0) 扫码查看

本文主要讲解关于Vue3是如何进行页面渲染的相关内容,让我们来一起学习下吧!

基本使用

当我们要渲染一块 DOM 的时候,Vue 内部会将这块 DOM 的 vnode,传给 render 函数,完成渲染:

const vnode = { ... } // 某块 DOM 对应的 vnode
render(vnode, document.getElementById('app'))

render 函数

render 函数的定义是这样子的:

const render = (vnode, container) => {
  if (vnode == null) {
    // 卸载
    if (container._vnode) {
      unmount(container._vnode, null, null, true);
    }
  } else {
    // 挂载或更新
    patch(container._vnode || null, vnode, container, null, null, null, isSVG);
  }
  container._vnode = vnode;
};

我们可以通过 render 函数进行挂载、更新和删除。

另外需要注意的是,我们会把当前 vnode 作为 container._vnode,这是为了再后面去 patch 的时候,作为 oldVNode

渲染:

render(vnode, document.getElementById("app"));

更新:

// 首次渲染
render(oldVNode, document.getElementById("app"));

// 更新
render(newVNode, document.getElementById("app"));

删除

// 首次渲染
render(oldVNode, document.getElementById("app"));

// 删除
render(null, document.getElementById("app"));

patch 函数

可以看到,当我们给 render 传递的第一个参数不是 null 的时候,我们会调用 patch 函数。

patch 函数:

const patch: PatchFn = (
    oldVNode,
    newVNode
  ) => {
    if (oldVNode === newVNode) {
      return
    }

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

在 patch 函数中,我们会根据 VNode 的不同 type 来进行不同的处理,比如处理文本节点、注释节点、DOM 节点、组件。。。

这里比如我们挑最常见的 DOM 节点来看,它会执行 processElement 函数。

processElement 函数:

const processElement = (oldVNode, newVNode) => {
  if (oldVNode == null) {
    mountElement(newVNode);
  } else {
    patchElement(oldVNode, newVNode);
  }
};

如果 oldVNode 为 null,那么就是挂载。

如果 oldVNode 不为 null,那么就是更新。

那么对于挂载和更新来说,它就会涉及到新增、删除、移动等等的节点操作,还有属性挂载等逻辑。

多宿主环境的支持

Vue 渲染主要是发生在运行时(runtime)。

并且,Vue 不仅可以在浏览器端渲染(CSR),还可以在服务端渲染(SSR),所以 Vue 就将 runtime 分成了两个包,渲染的核心逻辑代码会放到 runtime-core 中;浏览器渲染相关的代码会放到 runtime-dom 中,最终通过 options 传入。

总结

Vue 的渲染主要就是通过 render 来进行的,核心的逻辑就在 runtime-core 中。

以上就是关于Vue3是如何进行页面渲染的相关的全部内容,希望对你有帮助。欢迎持续关注潘子夜个人博客(www.panziye.com),学习愉快哦!


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/front/11741.html
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】