寻找项目中顶级Vue对象 (一)
个人博客首发博客园: www.cnblogs.com/zhangrunhao…
参考
感谢作者
- 从一个奇怪的错误出发理解 Vue 基本概念
- 安装 - Vue.js
- 渲染函数 - Vue.js
- Vue2 dist 目录下各个文件的区别
- 聊聊 package.json 文件中的 module 字段
- ES6模块 和 CommonJS 的区别
问题背景
- 在调试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) {return h('div', this.hi)}
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$ 的时候, 就会解析到指定的目录下面.
寻找项目中顶级Vue对象 (一)相关推荐
- webpack项目中使用vue
webpack项目中使用vue 第一步:运行 npm i vue –S 安装vue 第二步:在src->index.js入口文件中,通过 import Vue from 'vue' 来导入vue ...
- Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件 传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
- 在项目中使用vue过滤器小结
强调内容好记性始终不如一个烂笔头,平时工作中遇到问题时总能得到博客和群友的帮助,也希望自己写的东西能帮助别人吧,原理性的东西我不太清楚,我就尽量将使用方式和场景描述清楚一些,如果,中间有什么不对的,希 ...
- 如何使用mysql建立项目_【dbForge Studio for MySQL入门教程】如何在项目中使用数据库对象和如何使用项目构建配置...
重命名数据库对象 要从项目重命名对象,请执行以下步骤: 1. 在" Schema View "窗口中右键单击该对象. 2. 从快捷菜单中选择" Rename " ...
- ajax调用fastreport,使用Ajax更新ASP.Net MVC项目中的报表对象
Ajax技术显著加快了Web应用程序的速度.另外,视觉效果方面也有提升.大家都同意,每次点击按钮时整个页面都会被刷新这一点不太友好.如果你的网速不是很快,那么这个过程会很烦人,因为所有的元素都会先消失 ...
- Jquery项目中使用vue.js和element-ui
大家在工作的情况中,可能会遇到之前的老项目采用jq书写,或者修改或者新增功能在jq中,原始jq的项目,代码可维护性很差,一个页面几千行jq,可维护性很差,工作量巨大,所以这个时候大家可以引入vue.j ...
- vue2/3项目中使用Vue Carousel 3D实现 Carousel 3D 轮播
项目需求大概是这个样子,这种并不能通过围成一周再旋转父级实现,因此图方便选择了组件 轮播 vue2,可以直接使用 Playground - Vue Carousel 3D - 3D Carousel ...
- vue项目中app.vue 、main.js和 index.html的关联
1.main.js是我们的入口文件,主要作用是初始化vue实例并使用需要的插件. import Vue from 'vue' import App from './App'/* eslint-disa ...
- cli vue 外部js 引入 文件_javascript - vue cli构建的项目中,vue组件里怎么引入外部js文件里的方法...
问 题 我想在content组件里调用外部js(test.js)里的diyfun方法,怎么实现呢? 我的content组件代码: Click export default { data () { re ...
最新文章
- 神经网络贷款风险评估(base on keras and python )
- css制作圆角矩形,CSS绘制圆角矩形图形的效果
- matlab过滤,matlab过滤问题
- java程序员面试中的5个杀手锏问题
- Radware:安全信息的传送可以加速网络攻击的防御
- 【POJ - 3169】 Layout(差分约束+spfa)(当板子记?)
- iphone如何查看dns延迟_iPhone手机网速慢?1分钟教你设置DNS,网速立马翻一番
- 数据结构探险——队列篇
- js 弹出框 背景不滑动 方案
- eclipse php 环境及调试配置
- 对方启用和留言是什么意思_男子花八万元装修,装修到一半要求加价,对方:补给我一万两天就能装好...
- 黑苹果mac未能安装在你的电脑上_mac电脑上全新视频剪辑软件安装包分享,让你剪辑视频从此无忧!...
- 【mongoDB实战】mongo集群---主从复制篇
- ubuntu安装deep-wine下载qq,tim等文件
- anaconda怎么打开python文件_anaconda 运行.py文件
- 数据库索引原理及优化
- Windows禁止某个软件联网保姆级教程
- Unity3D-Tilemap初体验(Unity自带Tilemap使用体验)
- 3dsmax2014安装激活之 “软件许可证检出失败 错误20”或者显示错误5。
- CSS3之好看的特效