开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第16天，点击查看活动详情
vue版本
关于不同版本的 vue：
- vue.js 和 vue.runtime.esm.js的区别 （1）vue.js是完整版的vue，包含：核心功能 + 模板解析器 （2）vue.runtime.esm.js是运行版的vue，只包含：核心功能，没有模板解析器
- 因为vue.runtime.esm.js没有模板解析器，所以不能使用template配置项，需要
使用 render 函数接收到的 createElement 函数去指定具体内容
vue的渲染流程
具体来说，Vue中的渲染核心关键的几步流程还是非常清晰的：
- new Vue，执行初始化
- 挂载$mount方法，通过自定义render方法、template、el等生成render函数
- 通过Watcher监听数据的变化
- 当数据发生变化时，render函数执行生成VNode对象
- 通过patch方法，对比新旧VNode对象，通过DOM Diff算法，添加、修改、删除真正的DOM元素
至此，整个new Vue的渲染过程完毕。
而从宏观上来说，这张图展现了Vue整体流程：
模板通过编译生成AST，再由AST生成Vue的
render函数（渲染函数），渲染函数结合数据生成Virtual DOM树，Diff和Patch后生成新的UI。从这张图中，可以接触到Vue的一些主要概念：
- 模板：Vue的模板基于纯HTML，基于Vue的模板语法，我们可以比较方便地声明数据和UI的关系
- AST：抽象语法树
- Virtual DOM：虚拟DOM树
render函数是什么
Vue推荐在绝大多数情况下使用template来创建你的HTML。然而在一些场景中，需要使用JavaScript的编程能力和创建HTML，这就是render函数，它比template更接近编译器。
Vue的编译器在编译模板之后，会把这些模板编译成一个渲染函数。而函数被调用的时候就会渲染并且返回一个虚拟DOM的树。
当我们有了这个虚拟的树之后，再交给一个Patch函数，负责把这些虚拟DOM真正施加到真实的DOM上。
简而言之，render函数是用来生成虚拟DOM的。Vue推荐使用模板来构建我们的应用界面，在底层实现中Vue会将模板编译成渲染函数，但是我们也可以不写模板，直接写渲染函数，这样能够获得更好的控制
