Vue3 中 createApp 方法的实现分析及自定义 mount 方法

2024-01-14 03:06:33

正文

Vue3 中 createApp 方法的实现

Vue3 中的 createApp 方法是一个工厂函数，用于创建新的 Vue 应用实例。该方法接受一个参数，即应用选项对象。这个对象可以包含各种配置选项，例如组件定义、数据、方法等。

createApp(options?: AppOptions | null | undefined): App<RootData>

createApp 方法首先会对选项对象进行一些处理，比如将组件定义转换为可执行函数，将数据和方法绑定到相应的组件上。然后，它会调用 ensureRenderer() 方法来获取渲染器实例。渲染器负责将组件渲染成 HTML。

export function createApp(options?: AppOptions | null | undefined) {
  const app = ensureRenderer().createApp(options);

  // inject `app` instance to the global Vue temp variable
  {
    injectGlobalContext(app);
  }

  return app
}

获取到渲染器实例后，createApp 方法会调用渲染器的 createApp() 方法来创建新的应用实例。这个方法会创建一个新的组件实例，并将其作为应用的根组件。

export const createApp: CreateAppFunction = (rootComponent: Component | string, rootProps?: Data | null | undefined) => {
  return ensureRenderer().createApp(rootComponent, rootProps)
}

自定义 mount 方法

在 Vue3 中，可以通过重写 mount 方法来实现自定义的挂载逻辑。mount 方法是组件生命周期钩子之一，它会在组件挂载到 DOM 时被调用。

export interface ComponentPublicInstance {
  $mount(
    target?: string | Element | Component | null | undefined,
    hydrating?: boolean
  ): ComponentPublicInstance
}

自定义 mount 方法可以用来执行一些额外的操作，比如在组件挂载之前或之后对 DOM 进行一些处理。

app.mount('#app')

下面是一个自定义 mount 方法的示例：

const app = createApp({
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    console.log('组件已挂载到 DOM')
  },
  render() {
    return h('div', {
      onClick: this.increment
    }, 'Count: ' + this.count)
  }
})

app.mount('#app')