简而言之，就是先转化成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. Android studio 怎么使用单元测试（不需要device）

    关于单元测试的使用,写代码过程中有时候需要检测下代码逻辑的可行性与正确性,又不想通过设备运行,那么就可以通过单元测试跑下代码~ 1.首先建立一个Android studio的Android项目: 2. ...

  2. Sword redis存取二进制数据

    #include "hiredis/hiredis.h" /* redis头文件 */ #include <stdio.h> #include <stdlib.h ...

  3. Spark学习笔记——泰坦尼克生还预测

    package kaggle import org.apache.spark.SparkContext import org.apache.spark.SparkConf import org.apa ...

  4. Stanford Corenlp学习笔记——词性标注

    使用Stanford Corenlp对中文进行词性标注 语言为Scala,使用的jar的版本是3.6.0,而且是手动添加jar包,使用sbt添加其他版本的时候出现了各种各样的问题 添加的jar包有5个 ...

  5. 设计模式-结构型模式，python桥接模式

    桥接模式 桥接(Bridge)是用于把抽象化与实现化解耦,使得二者可以独立变化.这种类型的设计模式属于结构型模式,它通过提供抽象化和实现化之间的桥接结构,来实现二者的解耦. 这种模式涉及到一个作为桥接 ...

  6. php 启动服务器监听

    使用命令 php -S 域名:端口号 -t 项目路径 截图如下: 原本是通过localhost访问的 现在可以通过 127.0.0.1:8880 访问 此时命令行终端显示如下:

  7. HttpWatch工具简介及使用技巧

    一 概述: HttpWatch强大的网页数据分析工具.集成在Internet Explorer工具栏.包括网页摘要.Cookies管理.缓存管理.消息头发送/接受.字符查询.POST 数据和目录管理功 ...

  8. [Android] 基于 Linux 命令行构建 Android 应用（六）：Android 应用签名

    Android 要求所有应用在安装前必须使用证书进行数字签名.Android 使用该证书来确定一个应用以及其作者身份,该证书不要求由证书发行机构颁发,因此 Android 应用经常使用自我签名的证书, ...

  9. Qt编写echart仪表盘JS交互程序支持webkit和webengine（开源）

    Echart是百度研发团队开发的一款报表视图JS插件,功能十分强大,是本人用过的国产作品中最牛逼的,记得四五年前就在qt中使用过,当时用的浏览器控件是webkit,由于5.6以后的版本不再支持webk ...

  10. C# Timer 定时器

    Timer简单介绍 构造函数 通过ILSpy反编译可以看到Timer的内部代码. Timer 的默认构造函数里赋了初值,所以当我们初始化Timer的时候,已经有了默认值. Timer 的带参数的构造函 ...