寻找项目中顶级Vue对象 (一)

个人博客首发博客园: http://www.cnblogs.com/zhangrunhao/

参考

感谢作者

问题背景

  • 在调试Chrome的时候, 发现不能找到vm这个对象.
  • 在window下面也没有看到这个对象.
  • 产生了好奇心.

过程分析

  • 在dev环境下面:
    • 在控制台看的时候放到了 window的__VUE_DEVTOOLS_GLOBAL_HOOK__中
  • 找到了new Vue的运行栈.
  • 但是没能确定在Vue中具体的运行过程.
  • 应该是在import的时候, webpack就把引入的Vue对象放到了某个地方, 保存起来了.

运行时构建的Vue库/独立构建的Vue库

  • 使用import/require引入的是 运行时构建的Vue库 dist/vue.runtime.common.js
  • 使用<script>引入的是独立构建的Vue库
  • 区别就是是否包含一个template功能, 因为在运行时构建的Vue库中, 我们通过打包工具webpack等解决了这一问题.

选择挂载优先级

  • render渲染函数 > template编译模板 > 挂载到el属性上的指定DOM

render函数

  • 挂载在Vue的顶级函数上面. 渲染的最优先选择
  • render: function(cb / createElement) {} // 所有的的核心都在这个回调函数中
  • 这个回调函数就是createElement函数, 也就是我们用来创建VNode的函数, render返回的就是 回调函数的执行结果
  • return createElement(tag, data, array) // 这个就是我们的返回结果
  • 参数第一个表示, 我们的标签名称, 或者是一个实例组件. data就是我们这个组件的描述信息了. 什么都有.
  • 最后一个参数, 我们用来递归形成的子标签, 或者子组件, 数组表示平行关系
  • 第二个参数, 如果是一个字符串的话, 就是我们想要往里面插入的子组件陈列
  • render: h => h(App) / render(h)

vue不渲染Dom, 实现场景直接通信

  • 新建文件 import Vue from 'vue; export EventBus = new Vue()
  • 通过$on添加监听事件
    • import EventBus from './event-bus.js; EventBus.$on('customerEvent', function() {}).
    • 此处尽量不要使用箭头函数, 里面的指针不易改变
    • 回头自己试试.
  • 其他文件引入, 通过$emit触发
    • import EventBus from './event-bus.js; EventBus.$emit('customerEvent', ...params)

查找vue.runtime.common.js

应该从打包工具开始查找

/dist文件夹下八个文件的区别

  • 按照运行环境区分: 完整构建/运行时构建, 也就是是否可以使用template选项
  • 按照模块化规范: UMD/CommonJS/ESModule
    • AMD: requireJS实现. 主要是异步加载模块. (偏向浏览器)
    • COMMONJS: Node, 同步加载, 模块无需包装. (偏向服务器)
    • UMD: AMD和COMMON的结合, (先判断是否执行export/Node), 再判断是否支持(define/AMD).
  • vue.common.js: 基于common的完整构建. 使用webpack打包时, 需要配置别名.(这就不太理解了)
    • 我又预感, 问题应该就出在webpack的配置中
// webpack-1
{
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js'
    }
  }
}
  • vue.esm.js: 基于ESModule的完整构建. 使用webpack打包时, 也是需要配置
  • vue.js: 基于UMD的完整构建
  • vue.runtime.common.js: 基于common的运行时构建. 不支持template, .vue被解析成了render函数
  • vue.runtime.esm.js: 基于ESModule的运行时构建.
  • vue.runtime.js: 基于UMD的运行时构建.

项目直接引用的vue, 引用的是vue.runtime.common.js吗. 为何可以使用ESModle

  • 先贴出vue的package.json
{
  // ...
  "main": "dist/vue.runtime.common.js",
  "module": "dist/vue.runtime.esm.js",
  "unpkg": "dist/vue.js",
  "jsdelivr": "dist/vue.js",
  // ...
}
  • main: 是基于COMMONJS的. module: 是基于ES6的.
  • 因为使用ES6的话, 可以配置uglifyjs-webpack-plugin插件, 可以去除没有用到的函数.
  • 但是因为有些npm包不支持ES6, 比如有些node环境.
  • 这个时候, 会判断当前支持哪种环境, 然后选择不同的包.
  • 引入的时候, 不论包怎么导出都可用import引入. 但是导出的时候, 就会区分出来. 使用export/export default关键字, 还是module.exports/exports导出

结论, 我们的项目, 应该是引用了run.runtime.esm.js

webpack中配置别名

  • baseConf.resolve.alias.vue = 'vue/dist/vue.common.js';
  • 当我们解析vue / vue$ 的时候, 就会解析到指定的目录下面.
posted @ 2018-07-28 14:50  张润昊  阅读(1599)  评论(0)  编辑  收藏  举报