vue 和 react 的区别

1. 设计理念上的区别：
   Vue使用的是可变数据，而React更强调数据的不可变，通过重新render去发现和更新自身。Vue更加简单，而React构建大型应用的时候更加棒

   Vue通过收集数据依赖去发现更新。
   Vue首次渲染触发data的getter，从而触发依赖收集，为对应的数据创建watcher，当数据发生更改的时候，setter被触发，然后通知各个watcher在下个tick的时候更新数据

   只有依赖收集的数据发生更新，Vue 才会去重新渲染页面；
   只要数据有更新(setState，useState 等手段触发更新)，都会去重新渲染页面 （可以使用shouldComponentUpdate/ PureComponent 改善)

2. 数据流的不同：
   Vue2.x 已经不鼓励组件对自己的 props 进行任何修改了。 所以现在我们只有 组件 <–> DOM 之间的双向绑定这一种。 React 从诞生之初就不支持双向绑定，React一直提倡的是单向数据流，他称之为 onChange/setState()模式。

   双向绑定可以在表单交互较多的场景下，会简化大量业务无关的代码

   单向数据流的好处是所有状态变化都可以被记录、跟踪，状态变化通过手动调用通知，源头易追溯，没有“暗箱操作”；
   缺点则是代码量会相应的上升，数据的流转过程变长，从而出现很多类似的重复代码

3. 组件通信的区别：
   在Vue 中有三种方式可以实现组件通信：
   父组件通过 props 向子组件传递数据或者回调，虽然可以传递回调，但是我们一般只传数据，而 通过 事件的机制来处理子组件向父组件的通信
   子组件通过事件向父组件发送消息
   通过 V2.2.0 中新增的 provide/inject 来实现父组件向子组件注入数据，可以跨越多个层级。

   在 React 中，也有对应的三种方式：
   父组件通过 props 可以向子组件传递数据或者回调

   可以通过 context 进行跨层级的通信，这其实和provide/inject 起到的作用差不多。 可以看到，React本身并不支持自定义事件，Vue中子组件向父组件传递消息有两种方式：事件和回调函数，而且Vue更倾向于使用事件。但是在 React 中我们都是使用回调函数的，这可能是他们二者最大的区别。

4. 模板渲染方式的不同：
   React 是通过JSX渲染模板
   Vue是通过一种拓展的HTML语法进行渲染
   但其实这只是表面现象，毕竟React并不必须依赖JSX。在深层上，模板的原理不同，这才是他们的本质区别：
   React是在组件JS代码中，通过原生JS实现模板中的常见语法，比如插值，条件，循环等，都是通过JS语法实现的
   Vue是在和组件JS代码分离的单独的模板中，通过指令来实现的，比如条件语句就需要 v-if 来实现