简而言之，就是先转化成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. CAP原理中的一致性

    CAP原理指的是,这三个要素最多只能同时实现两点,不可能三者兼顾.因此在进行分布式架构设计时,必须做出取舍.而对于分布式数据系统,分区容忍性是基本要求,否则就失去了价值.因此设计分布式数据系统,就是在 ...

  2. 【转】xhEditor技术手册 网页编辑器基础教程

    1. xhEditor入门基础 1.1. 在线可视化HTML编辑器概述1.2. 获取xhEditor1.3. xhEditor运行环境1.4. xhEditor基本使用指南 1.1. 在线可视化HTM ...

  3. 求教如何在win7 X64系统上安装.net 3.5 sp1

    其实win7系统已自带net 3.5.1了.开始菜单——控制面板——程序——打开或关闭windows功能,找到Microsoft .NET Framework 3.5.1,去掉选项,确定.然后再进入“ ...

  4. [Laravel] 09 - Functional models

    Laravel框架下的若干常用功能实现. 文件上传 邮件发送 缓存使用 错误日志 队列应用 文件上传 一.配置文件 功能 配置 [config/filesystems.php] 'disks' =&g ...

  5. php文件缓存方法总结

    为大家分享很全的php文件缓存,供大家参考,具体内容如下 <?php class cache {  private static $_instance = null;    protected ...

  6. SpringBoot Docker Mysql安装，Docker安装Mysql

    SpringBoot Docker Mysql安装,Docker安装Mysql ================================ ©Copyright 蕃薯耀 2018年4月8日 ht ...

  7. Javascript--数组转换成字符串

    定义和用法 toString() 方法可把数组转换为字符串,并返回结果. 语法 arrayObject.toString() 返回值 arrayObject 的字符串表示.返回值与没有参数的 join ...

  8. Docker - Docker中搭建MySQL主从

    1.pull完centos7纯净版的镜像后,创建容器,然后将宿主机上下载的MySQL文件 (MySQL下载地址:http://mysql.mirror.kangaroot.net/Downloads/ ...

  9. M0 M4时钟控制（一）

    时钟控制器为整个芯片提供时钟源,包括系统时钟和所有外围设备时钟.该控制器还通过单独时钟的开或关,时钟源选择和分频器来进行功耗控制.在CPU使能低功耗PDEN(CLK_PWRCTL[7]) 位和Cort ...

  10. IDEA自动编译设置

    ctrl+alt+s: ctrl+shift+alt+/: