react和vue是如何渲染的？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树，来构建我们的应用。（想看更多就到PHP中文网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 更新。
本篇文章到这就结束了（想看更多就到PHP中文网React使用手册栏目中学习），有问题的可以在下方留言提问。
以上就是react和vue是如何渲染的？react和vue的渲染流程介绍的详细内容，更多请关注其它相关文章！