vue3 源码解析(4)— createApp 源码的实现

发布时间:2024年01月12日

前言

本文是 vue3 源码分析系列的第四篇文章,在使用 vue3 时,我们需要使用 createApp 来创建一个应用实例,然后使用 mount 方法将应用挂载到某个DOM节点上。那么在调用 createApp 时,vue 再背后做了些什么事情呢?在这篇文章中,我们将深入探讨 createApp 的实现原理,并通过源码分析来理解其工作机制。

createApp 的基本用法

我们先来看一下 createApp 的基本使用方式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>createApp</title>
</head>
<body>
<div id="app"></div>
<script src="../packages/runtime-dom/dist/runtime-dom.global.js"></script>
<script>
  const { createApp, h, reactive } = VueRuntimeDom;
  const App = {
    setup (props, context) {
      const state = reactive({ name: "11" });
      return {
        state
      };
    },
    render(proxy) {
      return h("div", {}, proxy.state.name);
    },
  };
  createApp(App, {}).mount("#app");
</script>
</body>
</html>

在上面的例子中, 我们从 vue 包中导出 createApp 方法,其中一个参数是组件配置对象,返回一个应用实例,然后调用 mount 方法将应用挂载到某个DOM节点上。我们先从入口函数 createApp 出发。

createApp

// 合并传入的参数
const renderOptionDom = extend({ patchProp }, nodeOptions)

const createApp = (rootComponent, rootProps) => {
  // 使用createRenderer函数创建一个渲染器实例,并调用其createApp方法来创建一个应用实例  
  // 这个方法通常用于创建应用实例,可以兼容不同的平台  
  const app = createRenderer(renderOptionDom).createApp(rootComponent, rootProps)
  const { mount } = app // render(vnode, container)
  // 定义一个名为mount的新方法
  app.mount = (selector) => {
    // 使用querySelector方法根据传入的selector选择器查找对应的DOM容器元素 
    const container = nodeOptions.querySelector(selector)
    container.innerHTML = ''
    // 调用mount方法,将容器作为参数传入,用于挂载应用实例到该容器上 
    mount(container)
  }
  return app
}

在源码中,我们直接调用了 createRenderer 方法,这个方法是创建渲染器的方法。
其中 renderOptionDom 是一些渲染器的配置,主要的作用是用来操作DOM的。先简单的来认识一下 renderOptionDom,这个里面的方法后面会用到。

// 定义一个对象包含了一些与DOM节点相关的功能方法  
const nodeOptions = {
  createElement: tag => document.createElement(tag),
  // 将一个子节点插入到父节点中的指定位置(锚点)的方法
  insert: (child, parent, anchor) => {
    parent.insertBefore(child, anchor || null);
  },
  querySelector: selector => document.querySelector(selector),
  createText: text => document.createTextNode(text),
}

接下来看下 createRenderer 方式的实现。

createRenderer

const createRenderer = (options) => {
  // 这个函数是用于渲染虚拟DOM,其中vnode表示虚拟节点,container表示渲染的目标容器
  // render函数的目的是解耦平台,使其能够兼容不同的平台或框架
  let render = (vnode, container) => {
    // 首次渲染时
    // null 上一次渲染的 vnode
    // vnode 当前需要渲染的 vnode
    // container 挂载的容器
    patch(null, vnode, container)
  }
  return {
    createApp: createAppAPI(render)
  }
}

createRenderer 内部返回 createApp 这个方法。而 createApp 方法的是通过 createAppAPI 方法创建的,所以我们还需要看一下 createAppAPI 方法的实现。

createAppAPI

const createAppAPI = (render) => {
  // 返回一个函数,主要是通过闭包来缓存上面传入的参数
  return function createApp (rootComponent, rootProps) {
    // 创建 app 对象
    const app = {
      // rootComponent 是我们传入的根组件
      _component: rootComponent,
      // rootProps 是我们传入的根组件的 props,这个参数必须是一个对象
      _props: rootProps,
      // 挂载的 DOM 节点
      _container: null,
      // 添加相关的事件
      mount (container) {
        // ...
      },
      use (plugin, ...options) {
        // ...
      },
      mixin(mixin) {
        // ...
      },
      component(name, component) {
        // ...
      },
      directive(name, directive) {
        // ...
      }
    }
    // 返回 app 对象
    return app
  }
}

看到这里,我们可以知道,createApp 方法的实现其实就是 createAppAPI 方法中返回的一个函数。在返回的函数中返回了一堆对象,这里可以看到我们常用的 use、mixin、component、directive、mount 等方法都是在 app 对象上的。这些对象就是我们在使用 createApp 方法时,可以调用的方法。

在入口函数 createApp 中,我们已经了解到我们在调用 createApp 方法时,会返回一个 app 对象,这个对象上有一个 mount 方法,我们需要通过这个方法来挂载我们的根组件。详细看下 mount 方法时如何实现的。

mount

// container 挂载的容器
mount (container) {
  // 创建虚拟dom
  const vnode = createVNode(rootComponent, rootProps)
  // render 函数是在 createRenderer 中定义,传递到 createAppAPI 中,通过闭包缓存下来的
  // 通过传入的自定义渲染函数进行渲染
  render(vnode, container)
  // 设置 app 实例的 _container 属性,指向挂载的容器
  app._container = container
}

这段代码定义了一个 mount 函数,用于将一个应用实例挂载到指定的容器上。首先创建一个虚拟节点,然后使用自定义的渲染函数将应用渲染到容器中,并设置应用实例的_container属性为挂载的容器。

createVNode

虚拟节点其实就是一个 js 对象,包含了 dom 的一些属性,比如 tag、props、children 等等。虚拟节点,大概信息如下:

const createVNode = (type, props, children = null) => {
  const vnode = {
    // 添加一个特殊的属性__v_isVNode,用于标记这个对象是一个虚拟节点
    __v_isVNode: true,
    // 设置虚拟节点的类型
    type,
    // 设置虚拟节点的属性。这些属性通常用于表示元素的属性和样式。  
    props,
    // 设置虚拟节点的子节点。这些子节点可以是另一个虚拟节点,也可以是实际的数据或组件
    children,
    // 为虚拟节点设置一个 key 属性。key 用于优化虚拟DOM的diff算法,帮助识别哪些节点发生了变化
    key: props && props.key, // diff 算法
    // 初始化虚拟节点的 el 属性为 null,表示这个虚拟节点还没有与实际的DOM节点对应起来
    el: null,
    // 初始化虚拟节点的属性为一个空对象,用于存储与该虚拟节点关联的组件实例。
    component: {}, // 组件实例
    // 用于标记虚拟节点的形状或类型
    shapeFlag
  }
  // 返回创建的虚拟节点对象
  return vnode
}

这里就只贴了部分 VNode 的相关定义,这里只是做一个简单的概念介绍。

render

render 函数是在 createRenderer 中定义的。这里可以通过传入的自定义的 render 渲染函数进行不同平台的渲染。具体源码如下:

let render = (vnode, container) => {
  // 将虚拟节点渲染到容器中
  patch(null, vnode, container)
}

patch

patch 函数的主要作用就是将虚拟节点渲染到容器中。由于 patch 函数内部的实现会牵扯到非常多的内容,这里只是大致的了解下原理即可。

/**
 * 
 * @param n1 上一次渲染的 vnode
 * @param n2 当前需要渲染的 vnode
 * @param container 容器
 * @param anchor 锚点, 用来标记插入的位置
 * @returns 
 */
const patch = (n1, n2, container, anchor = null) => {
  // n1 和 n2 是否相同
  if (n1 === n2) {
    return
  }
  // n1 是否存在且与 n2 的类型是否一致
  if (n1 && !isSameVNodeType(n1, n2)) {
    unmount(n1) // 删除元素
    n1 = null // 删除之后重新加载
  }

  const { shapeFlag, type } = n2
  if (type === Text) { // 文本
    console.log('文本')
    // 处理文本节点
    processText(n1, n2, container)
  } else if (shapeFlag & ShapeFlags.ELEMENT) { // 元素
    console.log('元素')
    // 处理元素节点
    processElement(n1, n2, container, anchor)
  } else if (shapeFlag & ShapeFlags.STATEFUL_COMPONENT) { // 组件
    console.log('组件')
    // 处理组件节点  
    processComponent(n1, n2, container)
  }
}

这段代码通过判断虚拟节点的类型(文本、元素或组件),来决定如何更新虚拟DOM。通常我们在使用 createApp 的时候,通常会传入一个根组件,这个根组件就会走到 processComponent 函数中。

processComponent

const processComponent = (n1, n2, container) => {
  // n1 为 null 说明这是首次挂载组件首次挂载
  if (n1 === null) {
    // 挂载组件到容器上
    mountComponent(n2, container)
  } else {
    // 更新组件节点 
    updateComponent(n1, n2, container)
  }
}

processComponent 函数做了两件事,一个是挂载组件,一个是更新组件。

const mountComponent = (initialVNode, container, anchor) => {
  // 通过调用组件的 render 方法,获取组件的 vnode
  const subTree = initialVNode.type.render.call(null)
  // 直接调用 patch 函数,将 subTree 渲染到指定的容器和锚点上
  patch(null, subTree, container, anchor);)
}

总结

我们通过阅读源码了解到,createApp 函数是 vue3 的入口函数,通过 createApp 函数我们可以创建一个应用。

createApp 的实现是借助了 createRenderer 函数,createRenderer 的实现内部包装了createAppAPI。

createApp 函数接收一个组件,然后返回一个应用,这个应用中有一个 mount 方法,这个 mount 方法就是用来将应用挂载到容器中的。

在 createApp 中重写了 mount 方法,内部的实现是通过调用渲染器的 mount 方法。

这个 mount 方法是在 createAppAPI 的内部函数 createApp 中实现的,createApp 函数中的 mount 方法会调用 patch 函数。

patch 函数内部会做很多的事情,虽然我们这里只是调用 mountComponent 实现了挂载的逻辑。

以上就是调用 createApp 时 vue 工作过程原理的详细内容。

文章来源:https://blog.csdn.net/AXBNMD/article/details/133919652
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。