react是facebook创建的框架,它推广了虚拟dom和新的js语法----jsx,在2013年5月份进行开源,React 是一个用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)
Vue作者尤雨溪 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
MVVM框架、双向数据绑定原理,数据驱动、组件化、轻量、简洁、高效、模块友好
虚拟dom是一个什么概念呢
image
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/
image
解析流程概览图
image
React依赖Virtual DOM,而Vue.js使用的是DOM模板。React采用的Virtual DOM会对渲染出来的结果做脏检查。
vue的渲染流程
Vue宣称可以更快地计算出Virtual DOM的差异,这是由于它在渲染过程中,会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。
image
要点可以概括为
react和vue的相似之处:
1.使用虚拟dom
2.提供了响应式和组件化的视图组件
3.关注核心库,伴随于此,有配套的路由和负责处理全局状态管理的库
vue的优势:
渲染用户界面的时候,dom的操作成本是最高的,那为了尽可能的减少对dom的操作,Vue和React都利用虚拟DOM来实现这一点,但Vue的Virtual DOM实现(一个陷阱的叉子)的权重要轻得多,因此比React的引入开销更少。
Vue 和 React 也提供功能性组件,这些组件因为都是没有声明,没有实例化的,因此会花费更少的开销。当这些都用于关键性能的场景时,Vue 将会更快。
5.更新性能
在react中,当一个组件的状态发生变化时,它将会引起整个组件的子树都进行重新渲染,从这个组件的根部开始。那为了避免子组件不必要的重新渲染,您需要随时使用shouldComponentUpdate,并使用不可变的数据结构。 在Vue中,组件的依赖关系在它的渲染期间被自动跟踪,因此系统准确地知道哪些组件实际上需要重新渲染。这就意味着在更新方面,vue也是快于React
6.开发中
在开发中,Vue 每秒最高处理 10 帧,而 React 每秒最高处理不到 1 帧。这是由于 React 有大量的检查机制,这会让它提供许多有用的警告和错误提示信息。vue在实现这些检查时,也更加密切地关注了性能方面。
之前有些过一篇关于vue双向数据绑定原理的文章,简易版的vue渲染数据,更新数据的流程(https://cloud.tencent.com/developer/article/1408687)