Fragment，Portal和Suspense

最新推荐文章于 2023-11-28 09:45:21 发布
最新推荐文章于 2023-11-28 09:45:21 发布
阅读量252 收藏
点赞数
分类专栏： vue3原理 前端 vue3 文章标签： vue 前端 vue3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38189842/article/details/108152684
版权
前端 同时被 3 个专栏收录
12 篇文章 0 订阅
订阅专栏
vue3
6 篇文章 0 订阅
订阅专栏
vue3原理
3 篇文章 0 订阅
订阅专栏

Fragment：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>test</title>
</head>

<body>
  <div id="container"></div>
</body>
<script src="./vue.global.js"></script>
<script>
  let app = Vue.createApp()
  const App = {
    setup() {
      let message = Vue.reactive({
        name: '张三',
        age: 18
      })
      return {
        message
      }
    },
    render() {
      return Vue.h(Vue.Fragment, {}, [Vue.h('p', {
          style: {
            'font-size': '30px',
            'color': 'red'
          },
          onclick: () => {
            this.message.age++
          },
        }, this.message.age), Vue.h('p', null,this.message.name),
      ])
    }
  }

  app.mount(App, container)
</script>

</html>

浏览器生成的节点为：

<div id="container">
  <!--fragment-0-start-->
    <p style="font-size: 30px; color: red;">18</p>
    <p>张三</p>
  <!--fragment-0-end-->
</div>

通过代码和结果其实就能猜出Fragment的作用了。vue渲染组件需要有一个根节点，写过vue2的应该都知道一个组件只能有一个根节点，通常我们会在组件套一层div，然而这个div其实是无用的节点，Fragment其实也是一个根节点，只不过他声称的是一段注释。

解析Fragment主要源码如下：

function processFragment(
    n1: HostVNode | null,
    n2: HostVNode,
    container: HostElement,
    anchor: HostNode | null,
    parentComponent: ComponentInternalInstance | null,
    parentSuspense: HostSuspenseBoundary | null,
    isSVG: boolean,
    optimized: boolean
  ) {
    const showID = __DEV__ && !__TEST__
    const fragmentStartAnchor = (n2.el = n1
      ? n1.el
      : hostCreateComment(showID ? `fragment-${devFragmentID}-start` : ''))!
    const fragmentEndAnchor = (n2.anchor = n1
      ? n1.anchor
      : hostCreateComment(showID ? `fragment-${devFragmentID}-end` : ''))!
    if (showID) {
      devFragmentID++
    }
    if (n1 == null) {
      hostInsert(fragmentStartAnchor, container, anchor)
      hostInsert(fragmentEndAnchor, container, anchor)
      // a fragment can only have array children
      // since they are either generated by the compiler, or implicitly created
      // from arrays.
      mountChildren(
        n2.children as HostVNodeChildren,
        container,
        fragmentEndAnchor,
        parentComponent,
        parentSuspense,
        isSVG,
        optimized
      )
    } else {
      patchChildren(
        n1,
        n2,
        container,
        fragmentEndAnchor,
        parentComponent,
        parentSuspense,
        isSVG,
        optimized
      )
    }
  }

和vue2渲染原理一样，根据render渲染函数将其生成一个个vnode节点(如果是vue模版则生成ast树转换成render函数)，然后从根节点根据不同的节点type进行渲染，当type为symbol(Fragment)时，执行processFragment函数。函数主要逻辑其实很简单，通过hostInsert函数插入两行注释代码，然后将children节点插入到第二行注释节点锚点之前。

Fragment并没有黑科技，只是将组件的根vnode变为2行注释代码。

Portal：

Portal同样也没有黑科技，使用方法如下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>test</title>
</head>

<body>
  <div id="container"></div>
  <div id="test"></div>
</body>
<script src="./vue.global.js"></script>
<script>
  let app = Vue.createApp()
  const App = {
    setup() {
      let message = Vue.reactive({
        name: '张三',
        age: 18
      })
      return {
        message
      }
    },
    render() {
      return Vue.h(Vue.Fragment, {}, [Vue.h('p', {
          style: {
            'font-size': '30px',
            'color': 'red'
          },
          onclick: () => {
            this.message.age++
          },
        }, this.message.age), Vue.h('p', null,this.message.name),
        Vue.h(Vue.Portal, {
            target:'#test'
        },this.message.age),
      ])
    }
  }

  app.mount(App, container)
</script>

</html>

浏览器生成的节点为：

<div id="container">
    <!---->
    <p style="font-size: 30px; color: red;">18</p>
    <p>张三</p>
    <!--18-->
    <!---->
</div>
<div id="test">18</div>

惊讶的发现，vue实例挂载的是container节点，但是test居然也渲染出了数据，并且当点击container的年龄时，test中的年龄也随之改变。这个功能对于全剧弹框简直太棒了。其远离其实就几行代码：

function processPortal(
    n1: HostVNode | null,
    n2: HostVNode,
    container: HostElement,
    anchor: HostNode | null,
    parentComponent: ComponentInternalInstance | null,
    parentSuspense: HostSuspenseBoundary | null,
    isSVG: boolean,
    optimized: boolean
  ) {
    const targetSelector = n2.props && n2.props.target
    const { patchFlag, shapeFlag, children } = n2
    if (n1 == null) {
      const target = (n2.target = isString(targetSelector)
        ? hostQuerySelector(targetSelector)
        : null)
      if (target != null) {
        if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
          hostSetElementText(target, children as string)
        } else if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
          mountChildren(
            children as HostVNodeChildren,
            target,
            null,
            parentComponent,
            parentSuspense,
            isSVG
          )
        }
      } else if (__DEV__) {
        warn('Invalid Portal target on mount:', target, `(${typeof target})`)
      }
    } else {
      // update content
      const target = (n2.target = n1.target)!
      if (patchFlag === PatchFlags.TEXT) {
        hostSetElementText(target, children as string)
      } else if (!optimized) {
        patchChildren(
          n1,
          n2,
          target,
          null,
          parentComponent,
          parentSuspense,
          isSVG
        )
      }
      // target changed
      if (targetSelector !== (n1.props && n1.props.target)) {
        const nextTarget = (n2.target = isString(targetSelector)
          ? hostQuerySelector(targetSelector)
          : null)
        if (nextTarget != null) {
          // move content
          if (shapeFlag & ShapeFlags.TEXT_CHILDREN) {
            hostSetElementText(target, '')
            hostSetElementText(nextTarget, children as string)
          } else if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
            for (let i = 0; i < (children as HostVNode[]).length; i++) {
              move((children as HostVNode[])[i], nextTarget, null)
            }
          }
        } else if (__DEV__) {
          warn('Invalid Portal target on update:', target, `(${typeof target})`)
        }
      }
    }
    // insert an empty node as the placeholder for the portal
    processCommentNode(n1, n2, container, anchor)
  }

代码主要做的就是一件事，通过target属性找到对应的dom节点，然后将Portal vnode节点下的children渲染在对应的dom节点中。

Suspense：

Suspense实现原理其实同样也很简单，先看应用场景：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>test</title>
</head>

<body>
  <div id="container"></div>
</body>
<script src="./vue.global.js"></script>
<script>
  function createAsyncComponent(component) {
    return {
      setup() {
        const p = new Promise(resolve => {
          setTimeout(() => {
            resolve(() => Vue.h('div', '加载完成'))
          }, 1000)
        })
        return p
      }
    }
  }
  const Async = createAsyncComponent()
  let app = Vue.createApp()
  const App = {
    setup() {
      let message = Vue.reactive({
        name: '张三',
        age: 18
      })
      return {
        message
      }
    },
    render() {
      return Vue.h(Vue.Suspense, null, {
        default: Vue.h(Async),
        fallback: Vue.h('div', '加载中')
      })
    }
  }

  app.mount(App, container)
</script>

</html>

现象为先展示加载中，一秒后结果变成加载完成。其实Suspense的实现原理采用的是slot，Suspense核心源码如下：

function mountSuspense(
  n2: VNode,
  container: object,
  anchor: object | null,
  parentComponent: ComponentInternalInstance | null,
  parentSuspense: SuspenseBoundary | null,
  isSVG: boolean,
  optimized: boolean,
  rendererInternals: RendererInternals
) {
  const {
    patch,
    options: { createElement }
  } = rendererInternals
  const hiddenContainer = createElement('div')
  const suspense = (n2.suspense = createSuspenseBoundary(
    n2,
    parentSuspense,
    parentComponent,
    container,
    hiddenContainer,
    anchor,
    isSVG,
    optimized,
    rendererInternals
  ))

  const { content, fallback } = normalizeSuspenseChildren(n2)
  suspense.subTree = content
  suspense.fallbackTree = fallback
  // start mounting the content subtree in an off-dom container
  patch(
    null,
    content,
    hiddenContainer,
    null,
    parentComponent,
    suspense,
    isSVG,
    optimized
  )
  // now check if we have encountered any async deps
  if (suspense.deps > 0) {
    // mount the fallback tree
    patch(
      null,
      fallback,
      container,
      anchor,
      parentComponent,
      null, // fallback tree will not have suspense context
      isSVG,
      optimized
    )
    n2.el = fallback.el
  } else {
    // Suspense has no async deps. Just resolve.
    suspense.resolve()
  }
}

主要就是干2件事，首先会patch default插槽(组件a，挂载节点为为一个隐藏的hiddenContainer，渲染加载完成)，然后判断有没有异步deps，如果没有则将组件a从一个隐藏的hiddenContainer移动到container上（suspense.resolve()），如果是异步的那么patch fallback插槽(组件b，渲染加载中)，很明显如果组件a为一个异步组件，那么会先渲染组件b，那么我们什么时候知道组件a是否渲染完成并且替换组件b的内容呢，在第一次patch default插槽时，会判断是否为异步，如果是异步会执行如下代码：

registerDep(instance, setupRenderEffect) {
      // suspense is already resolved, need to recede.
      // use queueJob so it's handled synchronously after patching the current
      // suspense tree
      if (suspense.isResolved) {
        queueJob(() => {
          suspense.recede()
        })
      }

      suspense.deps++
      instance
        .asyncDep!.catch(err => {
          handleError(err, instance, ErrorCodes.SETUP_FUNCTION)
        })
        .then(asyncSetupResult => {
          // retry when the setup() promise resolves.
          // component may have been unmounted before resolve.
          if (instance.isUnmounted || suspense.isUnmounted) {
            return
          }
          suspense.deps--
          // retry from this component
          instance.asyncResolved = true
          const { vnode } = instance
          if (__DEV__) {
            pushWarningContext(vnode)
          }
          handleSetupResult(instance, asyncSetupResult, suspense)
          setupRenderEffect(
            instance,
            parentComponent,
            suspense,
            vnode,
            // component may have been moved before resolve
            parentNode(instance.subTree.el)!,
            next(instance.subTree),
            isSVG
          )
          updateHOCHostEl(instance, vnode.el)
          if (__DEV__) {
            popWarningContext()
          }
          if (suspense.deps === 0) {
            suspense.resolve()
          }
        })
    },

当完成异步后，执行then里的函数，然后执行组件a的生命周期，然后通过suspense的resolve方法将组件a从一个隐藏的hiddenContainer移动到container上，即完成了替换组件b。

yydounai
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3 AsyncComponents
MM_520131400的博客
04-03 1816
组件异步加载
vue中的Suspense和defineAsyncComponent
捂耳听风的博客
03-14 307
与createAsyncComponent不同的是，defineAsyncComponent更加灵活，可以自定义加载异步组件的逻辑。具体来说，我们可以使用defineAsyncComponent来创建一个返回异步组件的工厂函数，该函数在调用时才会开始加载异步组件defineAsyncComponent返回的是一个函数，而不是一个组件选项对象。因此，在使用defineAsyncComponent定义异步组件时，需要将返回值作为组件的选项对象进行注册或传递给其他组件。示例代码如下：
vue3同一页面多次渲染挂着同一组件出错问题
LinMin的博客
03-01 950
vue3
vue源码分析(七)createComponent方法
TyrionJ的博客
02-21 569
在上文中，我们分析了当tag对应普通html标签时是通过new VNode()方式来生成VNode的。本文主要分析当tag不是字符串时调用createComponent方法生成VNode. vnode = createComponent(tag, data, context, children) 一. createComponent // src/core/vdom/create-compon...
【Vue】Vue源码第四步——组件化（createComponent）
及时行乐
02-28 611
我们在创建Vue实例的时候，经常会这样写 new Vue({ data: { count : 1 }, render: (h) => h(App) }}) 之前初始化章节已经讲过，render函数的参数是createElement createElement作用十分重要，并且会有两种情况： 1、如上例子，接收组件 2、把template编译成rend...
基于 SpringCloud 和 Vue3 的 OA 系统
11-06
5. **Fragment & Portal**：Vue3 支持了片段（Fragment）和 Portal，允许组件包含多个根节点，以及在不同位置渲染元素。 6. **TypeScript 支持**：Vue3 更加强调类型安全，提供了完整的 TypeScript 支持，提升了...
基于springboot和vue3开发的前后端分离H5点餐系统源码.zip
12-14
- **Fragment 和 Portal**：Vue3中新增的元素，扩展了模板语法。 3. **前后端分离**： - **API 设计**：前端通过HTTP/HTTPS请求调用后端提供的RESTful接口获取数据。 - **JSON 数据交换**：后端返回JSON格式的...
尚硅谷vue3的学习笔记
05-09
4. **Fragment、Suspense 和 Portal**：Vue3 支持了原生的Fragment、Suspense和Portal虚拟元素，这些在Vue2中需要依赖第三方库实现。 5. **Ref和Reactivity系统**：Vue3对响应式系统进行了重构，使用了更底层的ref...
vue31111111.7z
12-20
7. **Fragment, Portal, and Suspense Slots**：Vue 3允许在模板中使用多个根元素，这被称为Fragments。同时，Portal和Suspense slots也是新引入的概念，它们扩展了组件的布局可能性。 8. **Improved Performance**...
vue3.0源码.zip
08-25
9. **Suspense 和 Keep-Alive 结合**：Vue 3.0 提供了Suspense和Keep-Alive的组合使用，使得可以同时进行组件的懒加载和缓存，进一步提升用户体验。 10. **Custom Renderer**：Vue 3.0 改进了自定义渲染器API，使其...
vue3异步组件怎么获取ref，获取组件实例？曲线救国的方式。
wjlhanhan的博客
10-12 1319
目前的思路是把defineAsyncComponent包装一层，获取import后的promise就行。
fragment的工作原理_Vue 3中令人激动的新功能：Fragment+Suspense+多vmodel
weixin_39554021的博客
11-29 4906
上一篇：Vue 3中令人激动的新功能：Composition API本文接着上文继续翻译未完的内容。全局安装/配置API更改我们可以发现我们在实例化和配置应用程序的方式上又有了一个重大的变化。我们现在就来看看它的工作原理：import Vue from 'vue'import App from './App.vue'Vue.config.ignoredElements = [/^app-...
vue3中的Fragment、Teleport、Suspense新组件
最新发布
头条:俊哥前端工程师，真正的大师永远怀揣着一颗学徒的心。
11-28 1632
Fragment、Teleport、Suspense新组件
vue3.0有哪些新特性
u014212540的博客
04-20 4274
Vue3 新特性
vue3知识点：Suspense组件
刘大猫
07-20 810
vue3知识点：Suspense组件
前端之vue3新组件(fragment、teleport、Suspense、其他)
weixin_46372074的博客
05-26 557
vue3新组件1.fragment2.teleport使用（eg：弹窗）Suspense内置标签引入组件的两种方式其他 1.fragment 说明： vue2模板中必须要有一个根标签，vue3中却不用，就是用这个Fragment标签作为根标签，包裹住我们写的内容。渲染的时候又将其去掉。 小结： 2.teleport 使用（eg：弹窗） <template> <div> <button @click="isShow = true">显示弹窗</butt
从Vue2到Vue3【五】——新的组件（Fragment、Teleport、Suspense）
m0_57524265的博客
07-25 5257
本文详细讲解了vue3中新增的三个组件(Fragment、Teleport、Suspense)，这些新增的组件为Vue 3带来了更多的灵活性和便利性。它们使得组件化开发更加简单且功能更丰富，为开发者提供更多的选择和工具来构建高效、可维护的应用程序。
如何搭建vue3项目及vue3带来的变化
前端打工人的博客
10-28 633
改进 组件里可以有多个根节点（<fragment>） v-model 支持多属性 支持 将子树在其它地方渲染 可以自定义渲染函数，方便扩展到其它平台 增加了全局 API 的命名空间 将 props 变为可选 自定义指令增加 beforeUnmoun 变化 渲染函数变化 异步组件需要用 createAsyncComponent 统一普通插槽与作用域插槽 指令中支持动态参数 移除 inline-template filters 事件绑定中的 keyCode 不再支持函数式组件，请转用纯渲染函数 移
vue异步组件
m0_51065454的博客
08-17 676
vue异步组件
fragment和fragment通信
04-06
"fragment"是指Android应用程序中的一种界面组件，可以被添加到另一个界面组件中，作为其中的一个部分。而"fragment通信"则是指在一个应用程序中的不同fragment之间进行数据或消息的传递和交互。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值