background

Recently in the study of Vue source code, with Vue2 is still very different,

So this time we’re looking at run-time dom, Run-time core, reactivity,

Reactivity is a separate article, but I’m going to focus on run-time Core,

The API for createApp is defined in the createAppAPI. Ts API. NodeOps API is defined in the createAppAPI. NodeOps basically encapsulates some of the native DOM methods, such as inserBefore, which is typically used when mountElement mounts elements.

Initialization Process

Follow the code

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App);
app.use(store).use(router).mount('#app')
Copy the code

  1. CreateApp (App) // @vue/ runtimedom createApp(App) // @vue/ runtimedom createApp(App) // @vue/ runtimedom createApp(App) // @vue/ runtimedom createApp(App) // @vue/ runtimedom The final location of the method is run-time core/ SRC/apicreateapp.ts

  2. CreateRenderer -> baseCreateRenderer() exposes three methods: render, hydrate, createApp; The hydrate is actually the vue instance object returned by createApp, and the render function is the most important one: render. Ts, the file named after the function.

  3. CreateAppAPI (render, hydrate); Returns createApp() and extends some instance methods, chain calls

  4. mount(rootContainer: HostElement, isHydrate? : Boolean) converts the passed root component to a VNode and mounts it to rootContainer

  5. Render (vnode, container) Function: Render a vnode to a container container

  6. Patch (n1, n2, the container); N1 starts out empty and executes different functions depending on the type of N2, or processComponent if it is a component

  7. processComponent(n1, n2, container); Mount or update the component. Mount the mountComponent directly because N1 is initially empty

  8. mountComponent(initialVNode, container); CreateComponentInstance createComponentInstance and set the data state to setupComponent

  9. setupComponent(); Located in the component. Ts

  10. SetupStatefulComponent () calls callWithErrorHandling, which calls the setup function

  11. CallWithErrorHandling () calls setup() with two parameters props and setupContext

  12. handleSetupResult(instance, setupResult, isSSR); Process the object returned by the Setup function

The directory module

Compile: compile.vue files into.js files that are recognized by the browser runtime: when the program is run, the program is opened in the browser, and the code is run until the program is closed

  • Run-time DOM close API, properties, event handling
  • Run-time core instance code (platform independent)
  • Shared Internal tool library
  • compiler-core
  • compiler-dom
  • Reactivity is a responsive module that can be used with any framework
  • Compiler – SFC Vue single-file component compiler
  • Vue complete source code generation directory

Vue.global.js: is a “full” build that contains both the compiler and the runtime, so it supports dynamically compiling templates vue.runtime.global.js: contains only the runtime and requires precompiling templates during the build step

Finally, INSTEAD of Posting source code comments, I’ll refer to vue-next-fork