React和Vue比较

React和Vue都是现在比较流行的js框架，两者存在一定的异同，各有优缺点，分析两者的异同，可以从他们的设计思想出发。

1.数据驱动

两者都是数据驱动视图，但是实现方式还是有所差异的。

React

要想了解数据驱动视图的过程，首先要了解react的渲染过程

1. 编写：组件都是继承自React.Component（函数式组件除外）,组件内部的视图模板文件则采用jsx的语法进行编写
2. 编译：将我们编写的组件实例编译成一个个的虚拟dom节点（本质就是json对象）
3. 挂载：将虚拟dom节点编译成真实dom，并挂载到界面

React中数据驱动视图是通过setState来实现的，setState并不是直接导致真实dom的改变，它首先映射到虚拟的dom节点，虚拟dom节点的挂载导致页面视图的变化。

从流程上看，似乎多此一举，直接操作dom节点改变数据不是更直接，为什么要绕弯操作虚拟dom？首先dom操作的会导致浏览器的重绘重排，性能开销比较大,直接操作dom就和原生的js/jquery项目类似了。当我们在一个方法中出现了多次数据变化时，每次都要操作dom很浪费性能。有了虚拟dom后，把多次的数据变化先映射到虚拟dom中，最后进行一次挂载，相当于只操作了一次真实dom，有效的降低了性能开销。

 

Vue

要了解vue的数据驱动视图原理，就要了解Object.defineProperty,vue就是以此为基础实现的数据驱动。vu