本篇文章主要的介绍了关于react和vue的渲染流程，有详细的过程图，接下来就让我们一起来看这篇文章吧
react和vue的渲染流程对比react是facebook创建的框架，它推广了虚拟dom和新的js语法----jsx，在2013年5月份进行开源，react 是一个用于构建用户界面的 javascript 库。react主要用于构建ui，很多人认为 react 是 mvc 中的 v（视图）
react的特点声明式设计 −react采用声明范式，可以轻松描述应用。
高效 −react通过对dom的模拟（虚拟dom），最大限度地减少与dom的交互。
灵活 −react可以与已知的库或框架很好地配合。
jsx − jsx 是 javascript 语法的扩展。
组件 − 通过 react 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中
单向响应的数据流 − react 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
vue作者尤雨溪 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，vue 被设计为可以自底向上逐层应用。vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，vue 也完全能够为复杂的单页应用提供驱动。
vue的特点
mvvm框架、双向数据绑定原理，数据驱动、组件化、轻量、简洁、高效、模块友好
virtual dom虚拟dom是一个什么概念呢
vue.js(2.x)与react的其中最大一个相似之处，就是他们都使用了一种叫'virtual dom'的东西。所谓的virtual dom基本上说就是它名字的意思：虚拟dom。
dom树的虚拟表现。它的诞生是基于这么一个概念：改变真实的dom状态远比改变一个javascript对象的花销要大得多。
virtual dom是一个映射真实dom的javascript对象，如果需要改变任何元素的状态，那么是先在virtual dom上进行改变，而不是直接改变真实的dom。当有变化产生时，一个新的virtual dom对象会被创建并计算新旧virtual dom之间的差别。之后这些差别会应用在真实的dom上。
react的渲染流程babel转换工具地址：http://babeljs.io/repl/
1. react中 我们用jsx来写组件，它会被babel转换成纯js，然后preact的h函数会将这段js转换成dom树，最后preact的virtual dom算法会将virtual dom转换成真实的dom树，来构建我们的应用。（想看更多就到react参考手册栏目中学习）2. 真实的virtual dom会比上面的例子更复杂，但它本质上是一个嵌套着数组的原生对象。当新一项被加进去这个javascript对象时，一个函数会计算新旧virtual dom之间的差异并反应在真实的dom上。计算差异的算法是高性能框架的秘密所在。
解析流程概览图
react依赖virtual dom,而vue.js使用的是dom模板。react采用的virtual dom会对渲染出来的结果做脏检查。
vue的渲染流程vue宣称可以更快地计算出virtual dom的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。
流程示例图
vue的编译器在编译模板之后，会把这些模板编译成一个渲染函数。而函数被调用的时候就会渲染并且返回一个虚拟dom的树。这个树非常轻量，它的职责就是描述当前界面所应处的状态。
当我们有了这个虚拟的树之后，再交给一个patch函数，负责把这些虚拟dom真正施加到真实的dom上。在这个过程中，vue有自身的响应式系统来侦测在渲染过程中所依赖到的数据来源。在渲染过程中，侦测到的数据来源之后，之后就可以精确感知数据源的变动。到时候就可以根据需要重新进行渲染。当重新进行渲染之后，会生成一个新的树，将新树与旧树进行对比，就可以最终得出应施加到真实dom上的改动。最后再通过patch函数施加改动。要点可以概括为
当某个数据属性被用到时，触发 getter，这个属性就会被作为依赖被 watcher 记录下来。
整个函数被渲染完的时候，每一个被用到的数据属性都会被记录。
相应的数据变动时，例如给它一个新的值，就会触发 setter，通知数据对象对应数据有变化。
此时会通知对应的组件，其数据依赖有所改动，需要重新渲染。
对应的组件再次调动渲染函数，生成 virtual dom，实现 dom 更新。
本篇文章到这就结束了（想看更多就到react使用手册栏目中学习），有问题的可以在下方留言提问。
以上就是react和vue是如何渲染的？react和vue的渲染流程介绍的详细内容。