这是一个求同存异的过程!先看图分析
共同点:
1.数据驱动视图
在以前的时候我们频繁的使用dom改变视图,这不利于页面的优化;而Vue和React解决了这个痛处,采用了数据驱动视图的方式。
2、组件化
React和Vue都遵循组件化的思想,组件之间组合嵌套就形成了最后的网页页面。
3、Virtual DOM
Vue 和 React都采用了Virtual Dom + Diff的算法,不管是Vue的Template模板 + options api的写法,还是react的class或者function的写法,最后都是生成render函数,而render函数执行返回VNode。
不同点
1.核心思想不同(监听数据变化的实现原理不同)
Vue早期开发就尤雨溪大佬,所以定位就是尽可能的降低前端开发的门槛,让更多的人能够更快地上手开发。这就有了Vue的特点:灵活易用的渐进式框架,进行数据拦截/代理。也就是双向数据绑定的原理。
React 从一开始的定位就是提出 UI 开发的新思路。背靠大公司Facebook 的React想要做的事用更好的方式去颠覆前端开发方式。所以React推崇函数式编程,数据不可变以及单向数据流。当然需要双向的地方也可以手动实现, 比如借助onChange和setState来实现。
2.组件写法差异
React推荐的是 JSX + inline style,就是把html和css全部写入JavaScript中,即 all in js。
Vue推荐的做法是template的单文件组件格式,即html js css 全部写在同一个文件。
3.组件通信方面不同
Vue的通信方式有很多种可以实现比如
props $emit $on project/inject $attrs $listeners等等以及vue3.x新增的方法
React的通信有
父子之间通信:props
兄弟之间:消息订阅与发布(pubs-sub),集中式管理(redux)
祖孙之间:消息订阅与发布,集中式管理,conText