简而言之，就是先转化成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. 关于ECMP 等价路由

    1.ECMP简介 Equal-CostMultipathRouting,等价多路径.即存在多条到达同一个目的地址的相同开销的路径.当设备支持等价路由时,发往该目的 IP 或者目的网段的三层转发流量就可 ...

  2. 嵌入式开发之hi3519---i2c MDIO PHY uboot phy调试总结

    首先调试检查硬件,再调试软件 首先仔细阅读phy和主芯片datesheet ,尤其着重阅读mii寄存器,它是mac和phy交换信息的媒介. 硬件注意:关于phy的芯片需要注意的有几点:1.mdio接口 ...

  3. python 带正则的search 模块

    glob  是python 提供的一个支持正则表达式的查找文件的模块. 实现上采用了os.listdir() 和 fnmatch.fnmatch().  但是没有真的invoking a subshe ...

  4. IOC容器特性注入第四篇：容器初始化

    IOC容器,就是把各种服务都注入到容器里,想要什么就去拿什么,不仅解决服务类和接口类的耦合度还可以提高性能方便管理. 这里封装一个接口类和一个实现类 1.IContainerManager接口 pub ...

  5. python日志，一个改版SMTPHandler

    1.官方logging包的SMTPHandler不支持ssl的邮箱,修改成兼容ssl以支持大部分国内邮箱. 2.增加一个频率控制的参数,比如要设置一个报警邮件,异常时候通知我们,但假设1分钟内异常几千 ...

  6. js替换元素与设置时间间隔

    var lastReportTime = 0; //设置时间间隔 window.onload = function(){ setInterval(handleRefresh, 3000); } fun ...

  7. Hook lua库函数时遇到的问题

    最近在为distri.lua实现一个lua调试系统,有一个简单的需求,lua导入一个文件的时候,将这个文件的文件名记录下来, 以方便调试器在设置断点的时候判断是否一个合法的文件. lua导入文件是通过 ...

  8. 使用 tabindex 改变Tab 键顺序

    使用 tabindex原文 https://developers.google.cn/web/fundamentals/accessibility/focus/using-tabindex 在表单上使 ...

  9. git rebase 操作撤销

    git rebase可以更改提交历史,在不影响别人的情况下,能够重整git树. 但如果git rebase操作失误,却在push后才发现,怎么撤销rebase操作呢? 使用git reflog + g ...

  10. SPRING的事务配置详解

    spring事务配置的两种方式: 1.基于XML的事务配置.2.基于注解方式的事务配置. 前言:在我们详细介绍spring的两种声明式事务管理之前,我们需要先理解这些概念 1)spring的事务管理是 ...