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

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

• 熟悉完工具类方法后继续从Vue的入口继续入手。从2.目录结构分析中，已经简单了解到platform就是整个Vue工程的入口处。兼容不同平台来对Vue做不同的启动处理。

Vue Web端入口

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

  // 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两种模式。官网有对这两种模式的区别做过解释。

• 两种模式的入口文件分别对应于src/platform/web/entry-runtime.js、src/platform/web/entry-runtime-with-compiler两份文件。根据两份文件我们可以看出，单纯对运行时(runtime)仅仅引入了上文提及的Vue入口文件。而带编译器的运行时，内容更为复杂，主要为扩写了一个扩展的$mount方法(与“原始”的$mount方法做区分，该方法于6.源码阅读-core-组件挂载进行解析)。也因此可知，带编译器的运行的内容更多，这也是官网推荐性能更好的“运行时”模式的原因。