Vue入口文件查找

  • 查看 dist/vue.js 的构建过程
  • 当运行 npm run dev 时指定了配置文件，从配置文件 script/config.js 动手
  • web-full-dev （web蕴含编译器和运行时的开发版）

  • script/config.js 基于 node 的模块

    "dev": "rollup -w -c scripts/config.js -m --environment TARGET:web-full-dev"

配置文件 config.js

...// 判断是否有环境变量 targetif (process.env.TARGET) {  module.exports = genConfig(process.env.TARGET)} else {  exports.getBuild = genConfig  exports.getAllBuilds = () => Object.keys(builds).map(genConfig)}

genrator config 生成配置文件

function genConfig (name) {  const opts = builds[name]  ...  return config}

咱们传入的环境变量指向 build 中的 带编译器的 开发版本

const builds = {  'web-full-dev': {    // resolve把前面的门路转化为绝对路径    // 理论获取的是 src/platforms/web/entry-runtime-with-compiler.js    // resolve办法会找到下面的门路，有别名操作    entry: resolve('web/entry-runtime-with-compiler.js'),     dest: resolve('dist/vue.js'),    format: 'umd',    env: 'development',    alias: { he: './entity-decoder' },    // 打包出的文件的文件头 banner:banner函数    banner   }}

问题： 如果同时设置 template和 render 会执行谁？

const vm = new Vue({  el:"#app",  template:"<h3>Hello Template</h3>",  render(h) {    return h('h4',"Hello Render")  }})

解析 entry 所对应的入口文件，并答复下面的问题

  • 从 入口文件中，src/platforms/web/entry-runtime-with-compiler.js

    • el是dom元素
    • el不能是body或html标签
    • 如果没有render，把template转化成render函数
    • 如果有 render， 间接调用 mount 挂载 DOM

  • 断点调试 $mount 办法

    • 留神 npm run build 时并未开启sourcemap，如果想调试源码须要
    • 给vue.js 增加 //# sourceMappingURL=vue.js.map，可调试 vue.js源码 或批改配置文件增加 -m

  • 因而 以后入口文件文件的作用就是 重写原型$mount办法，对template模板进行解决，而后导出vue实例 （带编译器的版本）
  • 留神 与entry-runtime.js不同， 没有解决tempalte代码，间接返回了 vue实例 （运行时版本）

问题：Vue的构造函数在哪？Vue实例的成员/Vue的动态成员从哪里来的？

从入口文件反推，找到引入的中央

...// # src/platforms/web/entry-runtime-with-compiler.jsimport Vue from './runtime/index' // Vue引入的中央...export default Vue

解析 src/platforms/web/runtime/index.js

  • 此脚本次要是 跟web平台相干的，对Vue构造函数进行解决的脚本
  • 给Vue注册平台相干指令，给Vue原型上挂载了$mount，__patch__,导出了Vue实例

  • 然而仍然没有看到Vue构造函数！

    // # platforms/web/runtime/index.jsimport Vue from 'core/index'...export default Vue

解析 src/core/index.js

  • 持续查找下面引入的Vue
  • core下的代码是与平台无关的
  • initGlobalAPI(Vue) 给Vue构造函数增加静态方法
  • 然而仍然没有看到Vue构造函数！
import Vue from './instance/index'...initGalobalAPI(Vue)...export default vue

解析 src/core/instance/index.js

  • 与平台无关的.终于有Vue了
  • 此处不必 class 而用构造函数，起因是因为不便后续给Vue原型上挂成员办法
  • 对vue实例增加成员,初始化
...function Vue (options) {  if (process.env.NODE_ENV !== 'production' &&    !(this instanceof Vue)  ) {    warn('Vue is a constructor and should be called with the `new` keyword')  }  // 在 initMixin 中有这个办法  this._init(options)}...

总结：

四个导出Vue的模块

  • src/platforms/web/entry-runtime-with-compiler.js

    • web平台相干的入口
    • 重写了平台相干的 $mount()办法
    • 注册了Vue.compile()办法，传递一个HTML字符串返回render 函数

  • src/platforms/web/runtime/index.js

    • web 平台相干
    • 注册和平台相干的全局指令:v-model、v-show
    • 注册和平台相干的全局组件:v-transition、v-transition-group

    • 全局办法:

      • _patch_:把虚构DOM转换成实在DOM
      • $mount: 挂载办法

  • src/core/index.js

    • 与平台无关
    • 设置了Vue的静态方法，initGlobalAPI(Vue)

  • src/core/instance/index.js

    • 与平台无关
    • 定义了构造函数，调用了this._init(options)办法
    • 给Vue中混入了罕用的实例成员