Vue3 实例挂载之旅：从代码到理解

2023-09-26 08:13:22

Vue3 中的实例挂载

1. 创建组件实例

在「Vue3」中，创建一个组件实例由 createApp 「API」完成。调用 createApp() 方法，并将组件的配置项作为参数传递进去，就可以创建一个组件实例。

const app = createApp({
  data() {
    return {
      count: 0
    }
  },
  template: `
    <div>
      <button @click="count++">+</button>
      <p>{{ count }}</p>
    </div>
  `
})

2. 调用 mount() 方法

创建完一个组件实例后，我们需要调用 mount() 方法将组件实例挂载到页面中。mount() 方法的第一个参数是一个挂载点，也就是组件将要被挂载到的 HTML 元素。第二个参数是可选的，它允许我们指定一些额外的选项，比如挂载后的回调函数。

app.mount('#app')

3. mount() 方法的内部原理

当我们调用 mount() 方法时，Vue3 会进行以下步骤：

初始化 props、slots、调用 setup()、验证组件和指令的合理性。
开始安装，创建组件实例。
结束安装，初始化组件实例。

源码解读

1. mount() 方法的实现

mount() 方法的实现位于 packages/runtime-dom/src/component.ts 文件中。在这个文件中，我们可以看到 mount() 方法的代码：

export function mount(instance, container, isSVG) {
  // ...
}

2. mount() 方法的流程

mount() 方法的流程如下：

初始化 props、slots、调用 setup()、验证组件和指令的合理性。
开始安装，创建组件实例。
结束安装，初始化组件实例。

3. 相关内容在源代码中的位置

相关的内容在源代码中的位置如下：

初始化 props、slots、调用 setup()、验证组件和指令的合理性：位于 packages/runtime-dom/src/component.ts 文件中的 mountComponent 函数中。
开始安装，创建组件实例：位于 packages/runtime-dom/src/component.ts 文件中的 createComponentInstance 函数中。
结束安装，初始化组件实例：位于 packages/runtime-dom/src/component.ts 文件中的 setupComponent 函数中。