一、vue构建的基本了解

1,开始学习vue的源码的学习,vue.js是基于rollup构建的

它的配置在 scripts下面

rollup是webpack的简小版针对于js进行压缩的,没有提供复杂的功能

构建的入口

构建的过程

二 、Runtime Only vs Runtime Compiler

Runtime Only:
我们在使用Runtime Only 的版本的vue.js 的时候,我们需要借助vue-loder把.vue版本的解析成javascript
这是编译阶段时候做的,所以只包含vue.js,代码体积会很小。
Runtime Compiler :
这里没有对代码做编译,在vue 里面传入一个vue 的template属性,传入一个字符串,在客户端进行编译模板
在vue.js2.0版本中,我们最终都是渲染成rend()函数,如果是template的属性,我们最终会渲染成render函数,
这个编译是发生的运行中, 所以Runtime Compiler更加消耗性能
// 需要编译器的版本
new Vue({
template: '<div>{{ hi }}</div>'
}) // 这种情况不需要
new Vue({
render (h) {
return h('div', this.hi)
}

vue源码的构建的更多相关文章

  1. 深入vue - 源码目录及构建过程分析

     公众号原文链接:深入vue - 源码目录及构建过程分析   喜欢本文可以扫描下方二维码关注我的公众号 「前端小苑」 ​“ 本文主要梳理一下vue代码的目录,以及vue代码构建流程,旨在对vue源码整 ...

  2. vue源码构建代码分析

    这是xue源码学习记录,如有错误请指出,谢谢!相互学习相互进步. vue源码目录为 vue ├── src #vue源码 ├── flow #flow定义的数据类型库(vue通过flow来检测数据类型 ...

  3. 大白话Vue源码系列(01):万事开头难

    阅读目录 Vue 的源码目录结构 预备知识 先捡软的捏 Angular 是 Google 亲儿子,React 是 Facebook 小正太,那咱为啥偏偏选择了 Vue 下手,一句话,Vue 是咱见过的 ...

  4. 大白话Vue源码系列(02):编译器初探

    阅读目录 编译器代码藏在哪 Vue.prototype.$mount 构建 AST 的一般过程 Vue 构建的 AST 题接上文,上回书说到,Vue 的编译器模块相对独立且简单,那咱们就从这块入手,先 ...

  5. 大白话Vue源码系列(03):生成AST

    阅读目录 AST 节点定义 标签的正则匹配 解析用到的工具方法 解析开始标签 解析结束标签 解析文本 解析整块 HTML 模板 未提及的细节 本篇探讨 Vue 根据 html 模板片段构建出 AST ...

  6. 大白话Vue源码系列(03):生成render函数

    阅读目录 优化 AST 生成 render 函数 小结 本来以为 Vue 的编译器模块比较好欺负,结果发现并没有那么简单.每一种语法指令都要考虑到,处理起来相当复杂.上篇已经生成了 AST,本篇依然对 ...

  7. 大白话Vue源码系列(04):生成render函数

    阅读目录 优化 AST 生成 render 函数 小结 本来以为 Vue 的编译器模块比较好欺负,结果发现并没有那么简单.每一种语法指令都要考虑到,处理起来相当复杂.上篇已经生成了 AST,本篇依然对 ...

  8. 大白话Vue源码系列(05):运行时鸟瞰图

    阅读目录 Vue 实例的生命周期 实例创建 响应的数据绑定 挂载到 DOM 节点 结论 研究 runtime 一边 Vue 一边源码 初看 Vue 是 Vue 源码是源码 再看 Vue 不是 Vue ...

  9. 【vuejs深入三】vue源码解析之二 htmlParse解析器的实现

    写在前面 一个好的架构需要经过血与火的历练,一个好的工程师需要经过无数项目的摧残. 昨天博主分析了一下在vue中,最为基础核心的api,parse函数,它的作用是将vue的模板字符串转换成ast,从而 ...

随机推荐

  1. struts2 过滤器和拦截器的区别和使用

    java web 过滤器和拦截器的区别和使用  1.1 什么是拦截器:      拦截器,在AOP(Aspect-Oriented Programming)中用于在某个方法或字段被访问之前,进行拦截然 ...

  2. vue之自行实现派发与广播-dispatch与broadcast

    要解决的问题 主要针对组件之间的跨级通信 为什么要自己实现dispatch与broadcast? 因为在做独立组件开发或库时,最好是不依赖第三方库 为什么不使用provide与inject? 因为它的 ...

  3. SpringMVC视图及REST风格

    点击进入第二章:SpringMVC基础配置 什么是视图解析器? springMVC用于处理视图最重要的两个接口是ViewResolver和View. ViewResolver的主要作用是把一个逻辑上的 ...

  4. binlog2sql之MySQL数据闪回实践

    DBA或开发人员,有时会误删或者误更新数据,如果是线上环境并且影响较大,就需要能快速回滚.传统恢复方法是利用备份重搭实例,再应用去除错误sql后的binlog来恢复数据.此法费时费力,甚至需要停机维护 ...

  5. appium+python测试app使用相对坐标定位元素

    我们获取到的是绝对坐标,如果换一个屏幕分辨率不同的手机那这个坐标自然会发生变化,要实现不同手机均能实现点击同一控件自然要用到相对坐标了,具体方法如下: 1.获取当前空间的绝对坐标(x1,y1),开启指 ...

  6. python基础面试题(一)

    1.   简述Python代码的运行机制 1.把原始代码编译成字节码         编译后的字节码是特定于Python的一种表现形式,它不是二进制的机器码,需要进一步编译才能被机器执行. 2.把编译 ...

  7. mac下安装Brew 警告:Warning: /usr/local/bin is not in your PATH.

    终端输入命令 export PATH=/usr/local/bin:$PATH

  8. MyBatis - 6.Spring整合MyBatis

    1.查看不同MyBatis版本整合Spring时使用的适配包: http://www.mybatis.org/spring/ 2.下载整合适配包 https://github.com/mybatis/ ...

  9. 'mysql' 不是内部或外部命令,也不是可运行的程序 或批处理文件。

    1.C:\Users\Aiyufei>mysql -h 127.0.0.1 -u root'mysql' 不是内部或外部命令,也不是可运行的程序或批处理文件.解决方法: 配置环境变量即可,我的问 ...

  10. 新的表格展示利器 Bootstrap Table Ⅰ

     1.bootstrap table简介及特征 Bootstrap Table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分 ...