> For the complete documentation index, see [llms.txt](https://xiaobaiha.gitbook.io/tech-share/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://xiaobaiha.gitbook.io/tech-share/vue/vue2.6.x-yuan-ma-yue-du/4.-yuan-ma-yue-du-platform.md).

# Vue2.6.x源码阅读 - 4.源码阅读-platform

> 阅读学习`Vue`源码`/src`目录下的`platform`文件夹内的代码

* 熟悉完工具类方法后继续从Vue的入口继续入手。从[2.目录结构分析](/tech-share/vue/vue2.6.x-yuan-ma-yue-du/4.-yuan-ma-yue-du-platform.md)中，已经简单了解到`platform`就是整个Vue工程的入口处。兼容不同平台来对Vue做不同的启动处理。

## Vue Web端入口

* 通过入口文件中引入的`Vue`找到网页端下的构造函数所在的位置`src/platform/web/runtime/index.js`。查看其引入的内容，可以发现该入口下依旧引入了`Vue`，故可知当前文件则是在Web端下进行的封装。继续看后续的代码。

  ```javascript
  // src/platform/web/runtime/index.js

  // import 部分
  import Vue from 'core/index' // core封装导出的Vue
  // ...

  // 挂载浏览器模式下的专用方法，对于开发者无用
  // install platform specific utils
  Vue.config.mustUseProp = mustUseProp
  Vue.config.isReservedTag = isReservedTag
  Vue.config.isReservedAttr = isReservedAttr
  Vue.config.getTagNamespace = getTagNamespace
  Vue.config.isUnknownElement = isUnknownElement

  // 在option中挂载指令与组件
  // install platform runtime directives & components
  extend(Vue.options.directives, platformDirectives)
  extend(Vue.options.components, platformComponents)

  // ⭐️使用 虚拟DOM 更新 真实浏览器DOM 的核心算法
  // install platform patch function
  Vue.prototype.__patch__ = inBrowser ? patch : noop // 非浏览器下不作操作，noop来自于上文中的util.js，等价于no operation

  // 挂载在Vue实例上的最原始的 $mount 方法，用于调用挂载组件的方法
  Vue.prototype.$mount = function (
    el?: string | Element,
    hydrating?: boolean
  ): Component {
    // 获取元素并调用 mountComponent 方法
    el = el && inBrowser ? query(el) : undefined
    return mountComponent(this, el, hydrating)
  }

  // 再往下的部分则为使用 vue-devtool 插件时才需要的逻辑，可以暂时不作考虑
  // devtools global hook
  /* istanbul ignore next */
  if (inBrowser) {
    // ...
  }

  export default Vue
  ```
* 小结一下，Web端下的Vue入口文件做的工作主要为：
  1. 引入了`core`中的`Vue`
  2. 配置了用于转化虚拟DOM为真实DOM的`__patch__`方法
  3. 定义了**原始**的 `$mount` 方法

### runtime vs runtime-with-compiler

* 上文所述的入口文件，为Web端通用的入口文件，在Web端下依旧存在五种运行模式，出去服务端渲染模式，重点部分为`runtime`与`runtime-with-compiler`两种模式。[官网](https://cn.vuejs.org/v2/guide/installation.html#%E8%BF%90%E8%A1%8C%E6%97%B6-%E7%BC%96%E8%AF%91%E5%99%A8-vs-%E5%8F%AA%E5%8C%85%E5%90%AB%E8%BF%90%E8%A1%8C%E6%97%B6)有对这两种模式的区别做过解释。
* 两种模式的入口文件分别对应于`src/platform/web/entry-runtime.js`、`src/platform/web/entry-runtime-with-compiler`两份文件。根据两份文件我们可以看出，单纯对运行时(runtime)仅仅引入了上文提及的Vue入口文件。而带编译器的运行时，内容更为复杂，主要为扩写了一个扩展的`$mount`方法(与“原始”的`$mount`方法做区分，该方法于[6.源码阅读-core-组件挂载](/tech-share/vue/vue2.6.x-yuan-ma-yue-du/4.-yuan-ma-yue-du-platform.md)进行解析)。也因此可知，带编译器的运行的内容更多，这也是官网推荐性能更好的“运行时”模式的原因。