Vue3源码阅读笔记-Vue.createApp

·  阅读 219
Vue3源码阅读笔记-Vue.createApp

Vue.createApp到底做了什么?

当调用Vue.createApp时实际上会来到下面这个函数

export const createApp = ((...args) => {
  // 先调用ensureRenderer函数,确保有renderer渲染器
  // 最终ensureRenderer()会返回,下面的对象
  /**
   * {
      render,
      hydrate,
      createApp: createAppAPI(render, hydrate)
    }
    调用上面的createApp实际上是调用createAPI函数的的返回值
   */
  const app = ensureRenderer().createApp(...args)

  // 解构app对象的mount方法
  const { mount } = app
  // 重写app的mount方法
  // 在app.mount方法里调用了上面的mount方法
  app.mount = () => {
      // ...
  }
  return app
})
复制代码

ensureRenderer函数

// 这里延迟创建渲染器,是为了当用户没有使用到渲染器时(例如用户只使用到了响应式模块),渲染器可以被tree-shaking掉
let renderer
function ensureRenderer() {
    // 有渲染器直接返回,没有则调用createRenderer,并将createRenderer返回值保存到renderer中
  return (
    renderer ||
    (renderer = createRenderer(rendererOptions))
  )
}
复制代码

createRenderer函数

export function createRenderer(options) {
    // createRenderer调用baseCreateRenderer函数
  return baseCreateRenderer(options)
}
复制代码

baseCreateRenderer函数

function baseCreateRenderer(options, createHydrationFns){
    // 由于该函数实在是太长,2000多行,这里直接展示该函数的返回值和返回值用到的值
    // render函数
    const render = (vnode, container, isSVG) => {
    if (vnode == null) {
      if (container._vnode) {
        unmount(container._vnode, null, null, true)
      }
    } else {
      patch(container._vnode || null, vnode, container, null, null, null, isSVG)
    }
    flushPostFlushCbs()
    container._vnode = vnode
  }
    // ...
    return {
        render,
        hydrate,
        // 这里将render函数作为参数传递进去用到了柯里化
        // 为什么要用柯里化呢,因为调用这里渲染domo的render函数会被该函数返回函数所使用,
        // 我们也可以自己实现一个render函数,传递进去,这样就可以使用我们自己的render函数,这样就可以让变得更加可定制化
        createApp: createAppAPI(render, hydrate)
  }
}
复制代码

createAppAPI函数

export function createAppAPI(render, hydrate) {
  // baseCreateRenderer返回的对象中createApp属性实际是该函数
  return function createApp(rootComponent, rootProps = null) {
    
    if (rootProps != null && !isObject(rootProps)) {
        // 处理props
    }

    // 创建app的上下文,将其添加到app的_context属性中
    const context = createAppContext()
    const installedPlugins = new Set()

    // 创建一个变量来记录是否被挂载过
    let isMounted = false

    // 在这里为context添加app属性指向app对象,也就是说context和app是相互引用的
    const app = (context.app = {
      _uid: uid++,
      _component: rootComponent,
      _props: rootProps,
      _container: null,
      _context: context,
      _instance: null,
      version,
      get config() {
        return context.config
      },
      set config(v) {
      // ...
      },

      use(plugin, ...options) {
      // ...
        return app
      },

      mixin(mixin) {
      // ...
        return app
      },

      component(name, component) {
      // ...
        return app
      },

      directive(name, directive) {
      // ...
        return app
      },

      mount(rootContainer, isHydrate, isSVG) {
      // ...
      },

      unmount() {
      // ...
      },

      provide(key, value) {
      // ...
        return app
      }
    })
    return app
  }
}
复制代码

总结

  • 调用Vue.createApp时,会先调用ensureRenderer函数,该函数是为了确保有渲染器。
  • 如果没有渲染器,那么ensureRenderer函数会调用createRenderer函数,创建一个渲染器。
  • createRenderer函数内部调用了baseCreateRenderer函数,该函数才是真正创建渲染器的函数。在这个函数会返回一个渲染器对象,该对象有render函数和createApp函数
  • 有了渲染器对象,就会开始调用渲染器对象上的createApp函数,这个函数就是真正创建app对象的函数。
  • 渲染器对象上的createApp函数中,创建了app对象,并给该对象添加了use,mount,mixin,component,directive,unmount,provide等方法。同时还会创建一个app上下文(context)和app对象互相引用,还创建了isMounted变量,用来记录是否被挂载过。

其他vue3源码阅读笔记

app.mount的过程

diff算法

分类:
前端
标签: