vue和react的异同

vue和react有哪些区别

1. vue鼓励template模板编译，写起来很接近标准的html

   react推荐所有的模板通用jsx书写，会赋予很多编程能力

2. vue css写在单文件中，可以通过scoped属性模块化

   react css全部写进了js中，即all in js，模块css 需要使用**.module.css方式编写

3. vue是按照MVVM模式设计的

   react严格上只针对MVC的view层

4. virtual dom不一样，vue通过数据劫持的方式自动追踪每一个数据，追踪每一个组件的依赖关系，不需要重新渲染整个组件树

   react每当数据状态改变的时候，就会重新执行render函数，有时候需要shouldComponentUpdate这个生命周期函数方法来控制，purecomponent就是重写了shouldComponentUpdate，对props和state的浅层对比

5. vue实现了数据的双向绑定

   react的数据实是单向流动的，当通过dom改变状态时，也会重新执行render

6. state状态在react中不可改变，只能通过setState方法更新状态

7. 更新渲染和优化

   当组件状态发生变化，react的机制会触发整个组件树的重新渲染。可以通过shouldComponentUpdate或者pureComponentUpdate阻止子组件的重新渲染。

   vue的渲染功能开箱即用，提供了优化重新渲染，其中系统在渲染过程中跟踪依赖关系进行相应的工作，

vue和react的相同点

1. 都使用了virtual dom
2. 提供了响应式（reactive）和组件化的视图组件
3. 将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库

性能方面

• react在性能方面使用virtual dom实现没有vue的virtual dom实现好，相比较来说vue的virtual dom的实现更为轻量

• 在react应用中，当某个组件的状态的状态发生变化时，它会以该组件为根，重新渲染整个组件树（包括子组件）

  如果避免不必要的子组件渲染，你可能需要在可能的地方去使用PureComponent或者手动shouldComponentUpdate方法，同时你可能会需要使用不可变的数据结构来使你的组件更容易优化

  但是如果在使用PureComponet和shouldComponentUpdate时，需要保证该组件的整个子组件的渲染输出都是由该组件的props所决定，如果不符合这个情况，那么此类优化就会导致难以察觉的渲染结果不一致，使得react中组件优化伴随着相当的心智负担

  在vue中，组件的依赖是渲染过程中自动追踪的，所以系统能够精确的知道哪个组件确实被渲染，可以理解为自动获取了shouldComonent，并且没有上述子树问题限制，不用考虑此类组件的优化