一、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. Swift 学习- 04 -- 字符串和字符

    // 字符串 和 字符 // 字符串 是有序的 Character (字符) 类型的值的集合,  通过 String 类型的集合 // swift 的 String 和 Character 类型提供了 ...

  2. Confluence 6 Windows 中以服务方式自动重启的原因

    针对长时间使用的 Confluence,我们推荐你配置 Confluence 自动随操作系统重启而启动.针对一些 Windows 的服务器,这意味着需要让 Confluence 以服务的方式运行. 有 ...

  3. Confluence 6 发送 Confluence 通知到其他 Confluence 服务器

    你可以配置 Confluence 服务器向其他的 Confluence 服务器发送消息.在这种情况下,Confluence 服务器将不会显示 workbox. 希望发送消息到其他 Confluence ...

  4. LeetCode(109):有序链表转换二叉搜索树

    Medium! 题目描述: 给定一个单链表,其中的元素按升序排序,将其转换为高度平衡的二叉搜索树. 本题中,一个高度平衡二叉树是指一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过 1. 示例: ...

  5. laravel 获取当前月,当前星期,当天起始时间方法

    获取当前月起始时间: 1. $time=time(); $start=date('Y-m-01',$time);//获取指定月份的第一天 $end=date('Y-m-t',$time); //获取指 ...

  6. java基础概念整理(三)

    1.对象的上转型 对象的上转型不能调用和使用子类对象新增的成员和变量,不能调用子类新增的方法. 上转型对象可以访问子类继承或者隐藏的成员变量,也可以调用子类继承或者子类重写的实例方法.因此如果子类重写 ...

  7. uva11916 bsgs算法逆元模板,求逆元,组合计数

    其实思维难度不是很大,但是各种处理很麻烦,公式推导到最后就是一个bsgs算法解方程 /* 要给M行N列的网格染色,其中有B个不用染色,其他每个格子涂一种颜色,同一列上下两个格子不能染相同的颜色 涂色方 ...

  8. poj2441状态压缩dp基础

    /* 给定n头牛,m个谷仓,每头牛只能在一些特定的谷仓,一个谷仓只能有一头牛 问可行的安排方式 dp[i][j]表示前i头牛组成状态j的方案数,状态0表示无牛,1表示有牛 使用滚动数组即可 枚举到第i ...

  9. 基础运算符补充,流程控制之if判断/while循环

    常量 常量即指不变的量.在python中没有一个专门 的语法代表常量,程序员约定俗成地用变量名全部被大写代表常量. AGE_OF_OLDBOY = 56 基础运算符补充 1.算术运算 加减乘除+ - ...

  10. C程序的内存分配及动态内存

    1.程序内存的分配 一个由C/C++编译的程序占用的内存分为以下几个部分:1)栈区(stack) — 由编译器自动分配释放 , 存放为运行函数而分配的局部变量. 函数参数. 返回数据. 返回地址等. ...