跳到主要内容

官方实现

2023年09月11日
柏拉文
越努力，越幸运

一、packages/runtime-core/src/apiCreateApp.ts​

import { createVNode } from './vnode';

export function createAppAPI(render) {
  return function createApp(rootComponent, rootProps = null) {
    const app = {
      _component: rootComponent,
      _container: null,
      mount(rootContainer) {
        const vnode = createVNode(rootComponent, rootProps, null);
        render(vnode, rootContainer);
      }
    };
    return app;
  };
}

测试用例​

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CreateApp</title>
    <script src="../packages/vue/dist/vue.iife.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
      const { h, createApp } = Vue;

      const App = {
        template: `<div> Hellow World </div>`
        // render() {
        //   return h('div', 'hello world');
        // }
      };

      const app = createApp(App);
      app.mount('#app');
    </script>
  </body>
</html>