开发前端软件素材源码教程下载网站

全部
网站模板
网页特效
网站源码
素材资源
建站学院
软件工具
mysql mysql 微信 微信 小程序 苹果 dedecms 修真图
当前位置：首页 > 建站学院 > 其他教程 >  vue3中的createApp怎么使用

vue3中的createApp怎么使用

其他教程   发布日期：2025年03月03日   浏览次数：161次

这篇文章主要介绍“vue3中的createApp怎么使用”，在日常操作中，相信很多人在vue3中的createApp怎么使用问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”vue3中的createApp怎么使用”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

函数定义

createApp函数定义在文件 packages/runtime-dom/src/index.ts中

  1. export const createApp = ((...args) => {
  2.   const app = ensureRenderer().createApp(...args)
  3.  
  4.   if (__DEV__) {
  5.     injectNativeTagCheck(app)
  6.     injectCompilerOptionsCheck(app)
  7.   }
  8.  
  9.   const { mount } = app
  10.   app.mount = (containerOrSelector: Element | ShadowRoot | string): any => {
  11.     const container = normalizeContainer(containerOrSelector)
  12.     if (!container) return
  13.  
  14.     const component = app._component
  15.     if (!isFunction(component) && !component.render && !component.template) {
  16.       // __UNSAFE__
  17.       // Reason: potential execution of JS expressions in in-DOM template.
  18.       // The user must make sure the in-DOM template is trusted. If it's
  19.       // rendered by the server, the template should not contain any user data.
  20.       component.template = container.innerHTML
  21.       // 2.x compat check
  22.       if (__COMPAT__ && __DEV__) {
  23.         for (let i = 0; i < container.attributes.length; i++) {
  24.           const attr = container.attributes[i]
  25.           if (attr.name !== 'v-cloak' && /^(v-|:|@)/.test(attr.name)) {
  26.             compatUtils.warnDeprecation(
  27.               DeprecationTypes.GLOBAL_MOUNT_CONTAINER,
  28.               null
  29.             )
  30.             break
  31.           }
  32.         }
  33.       }
  34.     }
  35.  
  36.     // clear content before mounting
  37.     container.innerHTML = ''
  38.     const proxy = mount(container, false, container instanceof SVGElement)
  39.     if (container instanceof Element) {
  40.       container.removeAttribute('v-cloak')
  41.       container.setAttribute('data-v-app', '')
  42.     }
  43.     return proxy
  44.   }
  45.  
  46.   return app
  47. }) as CreateAppFunction<Element>

(1)首先创建App对象

(2)取出app对象中的mount方法，重写mount方法

  • 首先调用 normalizeContainer 函数来获取container节点

  • 清空container的innerHTML

  • 调用原mount方法

ensureRenderer

其函数定义为

  1. function ensureRenderer() {
  2.   return (
  3.     renderer ||
  4.     (renderer = createRenderer<Node, Element | ShadowRoot>(rendererOptions))
  5.   )
  6. }

ensureRenderer通过调用createRenderer，createRenderer函数定义在 packages/runtime-core/src/renderer.ts文件中

  1. export function createRenderer<
  2.   HostNode = RendererNode,
  3.   HostElement = RendererElement
  4. >(options: RendererOptions<HostNode, HostElement>) {
  5.   return baseCreateRenderer<HostNode, HostElement>(options)
  6. }

最终是调用baseCreateRenderer，其最终返回

  1. return {
  2.     render,
  3.     hydrate,
  4.     createApp: createAppAPI(render, hydrate)
  5.   }

createAppAPI

createAppAPI函数定义在 packages/runtime-core/src/apiCreateApp.ts文件中，其返回函数

  1. return function createApp(rootComponent, rootProps = null)

mount

其定义在packages/runtime-core/src/apiCreateApp.ts文件

  1. mount(
  2.         rootContainer: HostElement,
  3.         isHydrate?: boolean,
  4.         isSVG?: boolean
  5.       ): any {
  6.         if (!isMounted) {
  7.           const vnode = createVNode(
  8.             rootComponent as ConcreteComponent,
  9.             rootProps
  10.           )
  11.           // store app context on the root VNode.
  12.           // this will be set on the root instance on initial mount.
  13.           vnode.appContext = context
  14.  
  15.           // HMR root reload
  16.           if (__DEV__) {
  17.             context.reload = () => {
  18.               render(cloneVNode(vnode), rootContainer, isSVG)
  19.             }
  20.           }
  21.  
  22.           if (isHydrate && hydrate) {
  23.             hydrate(vnode as VNode<Node, Element>, rootContainer as any)
  24.           } else {
  25.             render(vnode, rootContainer, isSVG)
  26.           }
  27.           isMounted = true
  28.           app._container = rootContainer
  29.           // for devtools and telemetry
  30.           ;(rootContainer as any).__vue_app__ = app
  31.  
  32.           if (__DEV__ || __FEATURE_PROD_DEVTOOLS__) {
  33.             app._instance = vnode.component
  34.             devtoolsInitApp(app, version)
  35.           }
  36.  
  37.           return vnode.component!.proxy
  38.         } else if (__DEV__) {
  39.           warn(
  40.             `App has already been mounted.
  41. ` +
  42.               `If you want to remount the same app, move your app creation logic ` +
  43.               `into a factory function and create fresh app instances for each ` +
  44.               `mount - e.g. `const createMyApp = () => createApp(App)``
  45.           )
  46.         }
  47.       }

（1）调用createVNode创建虚拟结点

（2）调用 render 函数来实现渲染vnode。render函数是baseCreateRenderer 函数返回调用 createAppAPI 时传入的参数之一

  1. // implementation
  2. function baseCreateRenderer(
  3.   options: RendererOptions,
  4.   createHydrationFns?: typeof createHydrationFunctions
  5. ): any {
  6.     ....
  7.   const render: RootRenderFunction = (vnode, container, isSVG) => {
  8.     if (vnode == null) {
  9.       if (container._vnode) {
  10.         unmount(container._vnode, null, null, true)
  11.       }
  12.     } else {
  13.       patch(container._vnode || null, vnode, container, null, null, null, isSVG)
  14.     }
  15.     flushPostFlushCbs()
  16.     container._vnode = vnode
  17.   }
  18.  .....
  19. }

patch

函数定义在 packages/runtime-core/src/renderer.ts文件中

  1. const patch: PatchFn = (
  2.     n1,
  3.     n2,
  4.     container,
  5.     anchor = null,
  6.     parentComponent = null,
  7.     parentSuspense = null,
  8.     isSVG = false,
  9.     slotScopeIds = null,
  10.     optimized = __DEV__ && isHmrUpdating ? false : !!n2.dynamicChildren
  11.   ) => {
  12.     // patching & not same type, unmount old tree
  13.     if (n1 && !isSameVNodeType(n1, n2)) {
  14.       anchor = getNextHostNode(n1)
  15.       unmount(n1, parentComponent, parentSuspense, true)
  16.       n1 = null
  17.     }
  18.  
  19.     if (n2.patchFlag === PatchFlags.BAIL) {
  20.       optimized = false
  21.       n2.dynamicChildren = null
  22.     }
  23.  
  24.     const { type, ref, shapeFlag } = n2
  25.     switch (type) {
  26.       case Text:
  27.         processText(n1, n2, container, anchor)
  28.         break
  29.       case Comment:
  30.         processCommentNode(n1, n2, container, anchor)
  31.         break
  32.       case Static:
  33.         if (n1 == null) {
  34.           mountStaticNode(n2, container, anchor, isSVG)
  35.         } else if (__DEV__) {
  36.           patchStaticNode(n1, n2, container, isSVG)
  37.         }
  38.         break
  39.       case Fragment:
  40.         processFragment(
  41.           n1,
  42.           n2,
  43.           container,
  44.           anchor,
  45.           parentComponent,
  46.           parentSuspense,
  47.           isSVG,
  48.           slotScopeIds,
  49.           optimized
  50.         )
  51.         break
  52.       default:
  53.         if (shapeFlag & ShapeFlags.ELEMENT) {
  54.           processElement(
  55.             n1,
  56.             n2,
  57.             container,
  58.             anchor,
  59.             parentComponent,
  60.             parentSuspense,
  61.             isSVG,
  62.             slotScopeIds,
  63.             optimized
  64.           )
  65.         } else if (shapeFlag & ShapeFlags.COMPONENT) {
  66.           processComponent(
  67.             n1,
  68.             n2,
  69.             container,
  70.             anchor,
  71.             parentComponent,
  72.             parentSuspense,
  73.             isSVG,
  74.             slotScopeIds,
  75.             optimized
  76.           )
  77.         } else if (shapeFlag & ShapeFlags.TELEPORT) {
  78.           ;(type as typeof TeleportImpl).process(
  79.             n1 as TeleportVNode,
  80.             n2 as TeleportVNode,
  81.             container,
  82.             anchor,
  83.             parentComponent,
  84.             parentSuspense,
  85.             isSVG,
  86.             slotScopeIds,
  87.             optimized,
  88.             internals
  89.           )
  90.         } else if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
  91.           ;(type as typeof SuspenseImpl).process(
  92.             n1,
  93.             n2,
  94.             container,
  95.             anchor,
  96.             parentComponent,
  97.             parentSuspense,
  98.             isSVG,
  99.             slotScopeIds,
  100.             optimized,
  101.             internals
  102.           )
  103.         } else if (__DEV__) {
  104.           warn('Invalid VNode type:', type, `(${typeof type})`)
  105.         }
  106.     }
  107.  
  108.     // set ref
  109.     if (ref != null && parentComponent) {
  110.       setRef(ref, n1 && n1.ref, parentSuspense, n2 || n1, !n2)
  111.     }
  112.   }
  113. const patch: PatchFn = (
  114.     n1,
  115.     n2,
  116.     container,
  117.     anchor = null,
  118.     parentComponent = null,
  119.     parentSuspense = null,
  120.     isSVG = false,
  121.     slotScopeIds = null,
  122.     optimized = __DEV__ && isHmrUpdating ? false : !!n2.dynamicChildren
  123.   ) => {
  124.     // patching & not same type, unmount old tree
  125.     if (n1 && !isSameVNodeType(n1, n2)) {
  126.       anchor = getNextHostNode(n1)
  127.       unmount(n1, parentComponent, parentSuspense, true)
  128.       n1 = null
  129.     }
  130.  
  131.     if (n2.patchFlag === PatchFlags.BAIL) {
  132.       optimized = false
  133.       n2.dynamicChildren = null
  134.     }
  135.  
  136.     const { type, ref, shapeFlag } = n2
  137.     switch (type) {
  138.       case Text:
  139.         processText(n1, n2, container, anchor)
  140.         break
  141.       case Comment:
  142.         processCommentNode(n1, n2, container, anchor)
  143.         break
  144.       case Static:
  145.         if (n1 == null) {
  146.           mountStaticNode(n2, container, anchor, isSVG)
  147.         } else if (__DEV__) {
  148.           patchStaticNode(n1, n2, container, isSVG)
  149.         }
  150.         break
  151.       case Fragment:
  152.         processFragment(
  153.           n1,
  154.           n2,
  155.           container,
  156.           anchor,
  157.           parentComponent,
  158.           parentSuspense,
  159.           isSVG,
  160.           slotScopeIds,
  161.           optimized
  162.         )
  163.         break
  164.       default:
  165.         if (shapeFlag & ShapeFlags.ELEMENT) {
  166.           processElement(
  167.             n1,
  168.             n2,
  169.             container,
  170.             anchor,
  171.             parentComponent,
  172.             parentSuspense,
  173.             isSVG,
  174.             slotScopeIds,
  175.             optimized
  176.           )
  177.         } else if (shapeFlag & ShapeFlags.COMPONENT) {
  178.           processComponent(
  179.             n1,
  180.             n2,
  181.             container,
  182.             anchor,
  183.             parentComponent,
  184.             parentSuspense,
  185.             isSVG,
  186.             slotScopeIds,
  187.             optimized
  188.           )
  189.         } else if (shapeFlag & ShapeFlags.TELEPORT) {
  190.           ;(type as typeof TeleportImpl).process(
  191.             n1 as TeleportVNode,
  192.             n2 as TeleportVNode,
  193.             container,
  194.             anchor,
  195.             parentComponent,
  196.             parentSuspense,
  197.             isSVG,
  198.             slotScopeIds,
  199.             optimized,
  200.             internals
  201.           )
  202.         } else if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
  203.           ;(type as typeof SuspenseImpl).process(
  204.             n1,
  205.             n2,
  206.             container,
  207.             anchor,
  208.             parentComponent,
  209.             parentSuspense,
  210.             isSVG,
  211.             slotScopeIds,
  212.             optimized,
  213.             internals
  214.           )
  215.         } else if (__DEV__) {
  216.           warn('Invalid VNode type:', type, `(${typeof type})`)
  217.         }
  218.     }
  219.  
  220.     // set ref
  221.     if (ref != null && parentComponent) {
  222.       setRef(ref, n1 && n1.ref, parentSuspense, n2 || n1, !n2)
  223.     }
  224.   }

processComponent

函数定义在packages/runtime-core/src/renderer.ts文件中

  1. const processComponent = (
  2.     n1: VNode | null,
  3.     n2: VNode,
  4.     container: RendererElement,
  5.     anchor: RendererNode | null,
  6.     parentComponent: ComponentInternalInstance | null,
  7.     parentSuspense: SuspenseBoundary | null,
  8.     isSVG: boolean,
  9.     slotScopeIds: string[] | null,
  10.     optimized: boolean
  11.   ) => {
  12.     n2.slotScopeIds = slotScopeIds
  13.     if (n1 == null) {
  14.       if (n2.shapeFlag & ShapeFlags.COMPONENT_KEPT_ALIVE) {
  15.         ;(parentComponent!.ctx as KeepAliveContext).activate(
  16.           n2,
  17.           container,
  18.           anchor,
  19.           isSVG,
  20.           optimized
  21.         )
  22.       } else {
  23.         mountComponent(
  24.           n2,
  25.           container,
  26.           anchor,
  27.           parentComponent,
  28.           parentSuspense,
  29.           isSVG,
  30.           optimized
  31.         )
  32.       }
  33.     } else {
  34.       updateComponent(n1, n2, optimized)
  35.     }
  36.   }

比较旧的虚拟结点n1和新的虚拟节点n2，如果n1为空则挂载结点，否则更新结点。此时n1为空，执行mountComponent挂载结点

mountComponent

函数定义在packages/runtime-core/src/renderer.ts文件中

  1. const mountComponent: MountComponentFn = (
  2.     initialVNode,
  3.     container,
  4.     anchor,
  5.     parentComponent,
  6.     parentSuspense,
  7.     isSVG,
  8.     optimized
  9.   ) => {
  10.     // 2.x compat may pre-creaate the component instance before actually
  11.     // mounting
  12.     const compatMountInstance =
  13.       __COMPAT__ && initialVNode.isCompatRoot && initialVNode.component
  14.     const instance: ComponentInternalInstance =
  15.       compatMountInstance ||
  16.       (initialVNode.component = createComponentInstance(
  17.         initialVNode,
  18.         parentComponent,
  19.         parentSuspense
  20.       ))
  21.  
  22.     // inject renderer internals for keepAlive
  23.     if (isKeepAlive(initialVNode)) {
  24.       ;(instance.ctx as KeepAliveContext).renderer = internals
  25.     }
  26.  
  27.     // resolve props and slots for setup context
  28.     if (!(__COMPAT__ && compatMountInstance)) {
  29.       setupComponent(instance)
  30.     }
  31.  
  32.     // setup() is async. This component relies on async logic to be resolved
  33.     // before proceeding
  34.     if (__FEATURE_SUSPENSE__ && instance.asyncDep) {
  35.       parentSuspense && parentSuspense.registerDep(instance, setupRenderEffect)
  36.  
  37.       // Give it a placeholder if this is not hydration
  38.       // TODO handle self-defined fallback
  39.       if (!initialVNode.el) {
  40.         const placeholder = (instance.subTree = createVNode(Comment))
  41.         processCommentNode(null, placeholder, container!, anchor)
  42.       }
  43.       return
  44.     }
  45.  
  46.     setupRenderEffect(
  47.       instance,
  48.       initialVNode,
  49.       container,
  50.       anchor,
  51.       parentSuspense,
  52.       isSVG,
  53.       optimized
  54.     )
  55.   }

其执行流程为

（1）首先调用createComponentInstance创建组件的实例对象

（2）调用setupComponent来初始化属性及slots属性

（3）调用设置和渲染有副作用的函数setupRenderEffect，主要是执行ReactiveEffect的run方法来执行componentUpdateFn以及调度queueJob。

setupRenderEffect

函数定义在packages/runtime-core/src/renderer.ts文件中，关键的是当中定义的函数componentUpdateFn

  1. const componentUpdateFn = () => {
  2.       if (!instance.isMounted) {
  3.         let vnodeHook: VNodeHook | null | undefined
  4.         const { el, props } = initialVNode
  5.         const { bm, m, parent } = instance
  6.  
  7.         effect.allowRecurse = false
  8.         // beforeMount hook
  9.         if (bm) {
  10.           invokeArrayFns(bm)
  11.         }
  12.         // onVnodeBeforeMount
  13.         if ((vnodeHook = props && props.onVnodeBeforeMount)) {
  14.           invokeVNodeHook(vnodeHook, parent, initialVNode)
  15.         }
  16.         if (
  17.           __COMPAT__ &&
  18.           isCompatEnabled(DeprecationTypes.INSTANCE_EVENT_HOOKS, instance)
  19.         ) {
  20.           instance.emit('hook:beforeMount')
  21.         }
  22.         effect.allowRecurse = true
  23.  
  24.         if (el && hydrateNode) {
  25.           // vnode has adopted host node - perform hydration instead of mount.
  26.           const hydrateSubTree = () => {
  27.     
  28.             instance.subTree = renderComponentRoot(instance)
  29.             
  30.             hydrateNode!(
  31.               el as Node,
  32.               instance.subTree,
  33.               instance,
  34.               parentSuspense,
  35.               null
  36.             )
  37.             
  38.           }
  39.  
  40.           if (isAsyncWrapper(initialVNode)) {
  41.             (initialVNode.type as ComponentOptions).__asyncLoader!().then(
  42.               // note: we are moving the render call into an async callback,
  43.               // which means it won't track dependencies - but it's ok because
  44.               // a server-rendered async wrapper is already in resolved state
  45.               // and it will never need to change.
  46.               () => !instance.isUnmounted && hydrateSubTree()
  47.             )
  48.           } else {
  49.             hydrateSubTree()
  50.           }
  51.         } else {
  52.           
  53.           const subTree = (instance.subTree = renderComponentRoot(instance))
  54.          
  55.           patch(
  56.             null,
  57.             subTree,
  58.             container,
  59.             anchor,
  60.             instance,
  61.             parentSuspense,
  62.             isSVG
  63.           )
  64.           
  65.           initialVNode.el = subTree.el
  66.         }
  67.         // mounted hook
  68.         if (m) {
  69.           queuePostRenderEffect(m, parentSuspense)
  70.         }
  71.         // onVnodeMounted
  72.         if ((vnodeHook = props && props.onVnodeMounted)) {
  73.           const scopedInitialVNode = initialVNode
  74.           queuePostRenderEffect(
  75.             () => invokeVNodeHook(vnodeHook!, parent, scopedInitialVNode),
  76.             parentSuspense
  77.           )
  78.         }
  79.         if (
  80.           __COMPAT__ &&
  81.           isCompatEnabled(DeprecationTypes.INSTANCE_EVENT_HOOKS, instance)
  82.         ) {
  83.           queuePostRenderEffect(
  84.             () => instance.emit('hook:mounted'),
  85.             parentSuspense
  86.           )
  87.       &a						
  88. 						
  89. 						
  90. 						
  91. 						
  92. 						
  93. 						
  94.

以上就是vue3中的createApp怎么使用的详细内容，更多关于vue3中的createApp怎么使用的资料请关注九品源码其它相关文章！

相关热词： vue3中的createApp使用
上一篇：讲一讲如何在一个页面中使用多个百度分享按钮，分享不同的文章
下一篇：vue3怎么获取url地址参数

文章分类

IT资讯 CMS教程 服务器 数据库 前端开发 后端开发 工具使用 其他教程

最后更新

热门排行

网站首页 | 关于我们 | 免责声明 | 网站建设 | 在线工具 | 网站地图

版权声明：本站发布的资源部分自互联网，所有资源版权归原作者所有。如果有侵犯到您的权益，请联系本站删除，谢谢合作！

Copyright 2018-2025 ©19jp.com All Rights Reserved. 陕ICP备16002142号-1