A preliminary study of vuE3 source code

If we open the root directory of the project file, we will find the entry file for main.js

`import { createApp } from ‘vue’; import App from ‘./App.vue’;

createApp(App).mount(‘#app’)`

CreateApp (vue) createApp (vue) createApp (vue) createApp (vue

`function createAppAPI(render, hydrate) { return function createApp(rootComponent, rootProps = null) {

const context = createAppContext(); const installedPlugins = new Set(); let isMounted = false; const app = (context.app = { _uid: uid$1++, _component: rootComponent, _props: rootProps, _container: null, _context: context, version, get config() { return context.config; }, set config(v) { { warn(`app.config cannot be replaced. Modify individual options instead.`); } }, use(plugin, ... options) { return app; }, mixin(mixin) { return app; }, component(name, component) {context.component.ponents [name] = component; return app; }, directive(name, directive) { context.directives[name] = directive; return app; }, mount(rootContainer, isHydrate, isSVG) { if (! isMounted) { return vnode.component.proxy; } else { } }, unmount() { if (isMounted) { render(null, app._container); { devtoolsUnmountApp(app); } delete app._container.__vue_app__; } else { warn(`Cannot unmount an app that is not mounted.`); } }, provide(key, value) { context.provides[key] = value; return app; }}); return app; };Copy the code

} ‘You can see that the structure is very clear after the relevant condition judgment is omitted.

To be continued…