createApp
Returns an application instance that provides the application context. The entire tree of components mounted by the application instance shares the same context.
- Parameter: This function takes a root component option object as the first argument:
const app = createApp({
data() {
return {
.
}
},
methods: {... },
computed: {... }
.
})
Copy the codeWith the second argument, we can pass the root prop to the application:
const app = createApp(
{
props: ['username']
},
{ username: 'Evan' }
)
Copy the code<div id="app">
<! -- will display 'Evan' -->
{{ username }}
</div>
Copy the code- Core source code:
Create a Vue instance -- createApp (public API)
const createApp = ((... args) = > {
constapp = ensureRenderer().createApp(... args);
{
injectNativeTagCheck(app);
}
const { mount } = app;
E.g. createApp({data: {}}).mount("#app")
app.mount = (containerOrSelector) = > {
const container = normalizeContainer(containerOrSelector);
if(! container)
return;
CreateApp creates the options passed by the Vue instance
const component = app._component;
if(! isFunction(component) && ! component.render && ! component.template) {
component.template = container.innerHTML;
}
// Reset content before mounting
container.innerHTML = ' ';
// Execute app's original mount element
const proxy = mount(container);
// V-clock is used to prevent pages from appearing during loading
container.removeAttribute('v-cloak');
container.setAttribute('data-v-app'.' ');
return proxy;
};
return app;
});
// Make sure the renderer function exists
function ensureRenderer() {
return renderer || (renderer = createRenderer(rendererOptions));
}
/ * *
Create a normal render function
* /
function createRenderer(options) {
return baseCreateRenderer(options);
}
/ * *
Create a normal render function that accepts two generic arguments:
*
* Custom renderers can pass specific types in the platform, like this:
*
* ``` js
* const { render, createApp } = createRenderer<Node, Element>({
* patchProp,
* ...nodeOps
*})
* ` ` `
* /
function baseCreateRenderer(options, createHydrationFns) {
// ...
return {
render,
hydrate,
createApp: createAppAPI(render, hydrate)
};
}
/ * *
* create renderAPI
* @param {Function} Render render function
* @param {Boolean} Whether Hydrate is rendered on the server side
* @returns
* /
function createAppAPI(render, hydrate) {
CreateApp (options, rootProps) => The first parameter is options, and the second parameter is rootProps
return function createApp(rootComponent, rootProps = null) {
// If the second argument is passed, it must be an object
if(rootProps ! =null && !isObject(rootProps)) {
warn(`root props passed to app.mount() must be an object.`);
rootProps = null;
}
// Create a context object => {app, config: {}, mixins: [], Components: {}, directives: {}, provides: {}}
const context = createAppContext();
const installedPlugins = new Set(a);
// Whether it has been mounted
let isMounted = false;
// Return an app object
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.`);
}
},
// ...
/ / application API
// ...
// Start mounting elements
// e.g. app.mount("#app")
mount(rootContainer, isHydrate /* If hydrated, server render */) {
if(! isMounted) {
/ / create a VNode
const vnode = createVNode(rootComponent, rootProps);
vnode.appContext = context;
{
context.reload = (a)= > {
render(cloneVNode(vnode), rootContainer);
};
}
if (isHydrate && hydrate) {
hydrate(vnode, rootContainer);
}
else {
/ / render
render(vnode, rootContainer);
}
isMounted = true;
app._container = rootContainer;
rootContainer.__vue_app__ = app;
{
devtoolsInitApp(app, version);
}
return vnode.component.proxy;
}
else {
warn(`App has already been mounted.\n` +
`If you want to remount the same app, move your app creation logic ` +
`into a factory function and create fresh app instances for each ` +
`mount - e.g. \`const createMyApp = () => createApp(App)\``);
}
},
});
return app;
};
}
Copy the codeAppendix: github.com/fanqiewa/vu…