Vue – Next/Packages/Run-time core/ SRC/apicreateApp.ts

This is really easy, just put together what we’ve written before

Let’s see what it looks like

I’d rather not, because it’s too familiar

Write directly!

CreateApp receives the rootComponent object rootComponent and returns an App object with an interface that looks something like this

// vue-next/packages/runtime-core/src/componentOptions.ts
/ / 108 rows
export interface ComponentOptionsBase {
  setup
  name
  template
  render
  components
  directives
  inheritAttrs
  emits
  expose
  serverPrefetch

  // Omitted some internal interfaces
}
Copy the code

Setup and render are enclosed, the following is the App interface

// vue-next/packages/runtime-core/src/apiCreateApp.ts
/ / 28 lines
interface App {
  version
  config
  use
  mixin
  component
  directive
  mount
  unmount
  provide

  // Use SSR and devTools
  _uid
  _component
  _props
  _container
  _context
  _instance

  / / vue2. X
  filter

  / / vue3. X
  _createRoot
}
Copy the code

When we looked, we found that all we needed was a mount

The mount implementation

Turns out, if you’re lazy enough to steal, it’s easy enough to write code. Look

const createApp = rootComponent= > {
    const app = {
        mount(rootContainer) {
            if (typeof rootComponent === 'string') {
                rootContainer = document.querySelector(rootContainer);
            }

            render(h(rootComponent), rootContainer);
        }

        // use, mixin, etc...
    }
    return app;
}
Copy the code

To use the

Finished, run and see

createApp({
    setup() {
        const count = ref(0);
        const add = () = > {
            count.value++;
        };
        return { count, add };
    },
    render(ctx) {
        return h('div'.null, [
            h('div', { id: 'div' }, ctx.count.value),
            h('button', { onClick: ctx.add, id: 'btn' }, 'add'),]); }, }).mount(document.body);
Copy the code

Results the following

Click the button a few times

As you can see, it’s pretty much fine, right

conclusion

There is no good summary, if not feel separate write will be clearer, maybe the last article by the way write createApp, but here to declare, the implementation of simple completely because of lazy, source code is still very complex, there are many many interfaces, in addition to consider SSR, etc., Since only the positions API is implemented, the implementation here is as simple as it can be, so we’ll think about OptionsAPI later