简而言之，就是先转化成AST树，再得到的render函数返回VNode(Vue的虚拟DOM节点)

详情步骤：

首先，通过compile编译器把template编译成AST语法树(abstract syntax tree 即源代码的抽象语法结构的树状表现形式)，compile是createCompiler的返回值，createCompiler是用以创建编译器的。另外compile还负责合并option；

然后，AST会经过generate(将AST语法树转化成render function字符串的过程)得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，里面有（标签名、子节点、文本等等）；

对vue.js的template编译的理解的更多相关文章

  1. 聊聊Vue.js的template编译

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/a ...

  2. Vue.js：template

    ylbtech-Vue.js: 1.返回顶部   2.返回顶部   3.返回顶部   4.返回顶部   5.返回顶部     6.返回顶部   7.返回顶部   8.返回顶部   9.返回顶部   1 ...

  3. 你应该要知道的vue.js

    前言 小组同事最近都在学习前端,目前我们小组前端技术栈主要是vue.在和同事交流过程成,发现他们对vue都不了解,所以整理了问的比较多的问题. 组件data为什么必须是函数? 因为组件可能被多处使用, ...

  4. vue.js面试题整理

    Vue.js面试题整理 一.什么是MVVM? MVVM是Model-View-ViewModel的缩写.MVVM是一种设计思想.Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务 ...

  5. web前端开发面试题（Vue.js）

    1.active-class是哪个组件的属性?嵌套路由怎么定义? 答:vue-router模块的router-link组件. 2.怎么定义vue-router的动态路由?怎么获取传过来的动态参数?  ...

  6. Vue.js面试题整理（转载）

    一.什么是MVVM? MVVM是Model-View-ViewModel的缩写.MVVM是一种设计思想.Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑:View 代表UI ...

  7. [ 转载 ] vue.js面试题一

    转载自:https://www.cnblogs.com/aimeeblogs/p/9501490.html 如有侵权 联系删除 Vue.js面试题整理 一.什么是MVVM? MVVM是Model-Vi ...

  8. Vue.js面试题

    一.什么是MVVM? MVVM是Model-View-ViewModel的缩写.MVVM是一种设计思想.Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑:View 代表UI ...

  9. 从template到DOM(Vue.js源码角度看内部运行机制)

    写在前面 这篇文章算是对最近写的一系列Vue.js源码的文章(https://github.com/answershuto/learnVue)的总结吧,在阅读源码的过程中也确实受益匪浅,希望自己的这些 ...

随机推荐

  1. FatTree拓扑结构

    FatTree拓扑结构是由MIT的Fares等人在改进传统树形结构性能的基础上提出的,属于switch-only型拓扑. 整个拓扑网络分为三个层次:自上而下分别为边缘层(edge).汇聚层(aggre ...

  2. c++ linux socket编程 c++网络编程

    声明:大部分代码来自这篇博客http://www.cnblogs.com/diligenceday/p/6241021.html, 感谢博主 思路: 思路很重要呦~~~ socket详细信息,思路:h ...

  3. 【03月04日】A股滚动市盈率PE历史新低排名

    2010年01月01日 到 2018年12月05日 之间,滚动市盈率历史新低排名. 上市三年以上的公司,2018年12月05日市盈率在300以下的公司. 1 - 青松股份(SZ300132) - 历史 ...

  4. classifier in maven

    http://maven.apache.org/plugins/maven-deploy-plugin/examples/deploying-with-classifiers.html Beside ...

  5. [Bayes] prod: M-H: Independence Sampler for Posterior Sampling

    M-H是Metropolis抽样方法的扩展,扩展后可以支持不对称的提议分布. 对于M-H而言,根据候选分布g的不同选择,衍生出了集中不同的变种: (1)Metropolis抽样方法 (2)随机游动Me ...

  6. MySQL -- 行转列 -- GROUP_CONCAT -- MAX(CASE WHEN THEN)

    列转行:利用max(case when then) SELECT `name`, MAX( CASE WHEN course='语文' THEN score END ) AS 语文, MAX( CAS ...

  7. React性能分析利器来了，妈妈再也不用担心我的React应用慢了（转）

    Profiler React16.5正式在devtool中加入了Profiler功能,用于收集每次变更导致的渲染时间,帮助开发者发现潜在的性能问题,有助于开发更高性能的React应用 官方博客 如何使 ...

  8. Elasticsearch 学习之携程机票ElasticSearch集群运维驯服记(强烈推荐)

    转自: https://mp.weixin.qq.com/s/wmSTyIGCVhItVNPHcH7nsA 一.整体架构 为什么采用ES作为搜索引擎呢?在做任何事情的时候,不要一上来就急着了解怎么做这 ...

  9. Asp.Net Identity cookie共享

    n the Startup.Auth.cs file, add the CookieDomain parameter with your domain: var cookieAuthenticatio ...

  10. 【CF717G】Underfail 费用流

    [CF717G]Underfail 题意:赌城拉斯维起司的赌场最近推出了一种新式赌法.它的玩法是由庄家(Joker)设局,赌徒只需要交付一定数额的赌资即可入局.具体地,Joker将给出一个长度为 $n ...