1、组件化方面
模块化:是从代码的角度来进行分析的,即把一些课复用的代码,抽离未单个模块,便于项目的维护和开发。
组件化:是从UI界面的角度来进行分析的,即把一些可复用的UI元素,抽离为单独的组件。
组件化的好处:项目规模增大,组件会增多,组件化开发就可以很方便的将现有组件拼接成一个完整的页面。
Vue中的组件化:通过 .vue
文件来创建对应组件
.vue模板文件中的内容:
- template 结构(内容)
- script 行为
- style 样式
React实现组件化:React没有模板文件,都以JS表现
2、移动APP开发体验方面
Vue主要使用Weex进行移动端开发
React主要使用React Native进行移动端开发
3、监听数据变化的实现原理不同
Vue通过 getter
/setter
以及一些函数的劫持知道数据的变化
React通过diff算法进行
4、数据流不同
Vue和React都是单向数据流传递
Vue采用双向绑定:利用MVVM框架实现,view和model虽然不能直接通信,但可以利用viewmodel中间件。
- 父组件使用
props
将值传递给子组件后,子组件通过$emit
事件通知父组件修改,也存在v-model
,主要是使用v-bind
和v-on
的语法糖实现
React是单向绑定的,虽然model和view也是通过viewmodel来处理的,但需要 setState
手动刷新渲染view。
5、组件的通信
vue中
- 父元素——>子元素 :通过
props
- 子元素——>父元素 :通过
$emit
provide/inject
React中
- 父元素——>子元素 :通过
props
传递数据或回调函数 - 利用
context
实现跨层级的通信
6、模板渲染方式的不同
Vue通过扩展的HTML语法进行渲染,主要使用指令;
React通过JSX进行,主要使用原生Javascript进行
7、渲染过程不同
Vue通过跟踪组件间的依赖关系进行
React通过计算新旧两颗虚拟DOM树之间的差异,将新的DOM整个插入