论Vue和React的差异

154 阅读2分钟

1 Vue

Vue是一个用于构建用户界面的渐进式JS框架,采用template模板的方式更加贴近HTML,学习成本大大降低,也更加语义化一些。

2 React

React是一个用于构建用户界面的JS库,由 Facebook 于 2013 年创建。它最初用于构建 Facebook 网站,后来最流行的JS框架之一。

3 差异

1 上手难度

Vue中包含许多内置指令、语法糖和组件框架等,其内部由Vue来自动实现,上手简单。而React需要对于性能的把控非常需要开发经验,因此上手难度更高。

2 状态管理

Vue状态管理工具有Vuex和Pinia等,借助开发工具vue-devtool更好,而React主要使用redux进行状态管理,需要独立下载redux-devtool工具,值得注意的是redux并不与React相捆绑,而是独立的用于状态管理的第三方库。

3 组件的概念

Vue中使用SFC单文件组件策略,通俗来说一个vue文件就是一个组件,而React中采用JSX语法,一个函数就是一个组件。

4 库和框架

为什么说Vue是一个库,而React是一个框架呢?

个人理解为:库是为了满足特定某一点需求而开发出来的代码集合,我们可以随意调用以满足开发需要,而框架是用于解决大的开发需求而生产出来的,包含开发过程中遇到的一系列问题,它和周围生态的联系更加紧密。当我们使用库时可能比较会比较随心所欲,但同时更多的问题需要我们独立解决;而使用框架可能更加全面和自动化地解决这些问题,但与此同时我们也受限于框架的语法和特性。

5 组件内容分发

Vue中通过插槽进行接受,而React通过props.children进行接收。

6 组件插槽

Vue中明确指出组件插槽的概念,而在React中没有这些概念,但是可以通过函数组件的组合嵌套来实现类似的效果

7 数据更新

数据更新方面Vue采用响应式数据,通过getter和setter对响应式对象进行数据劫持、进行依赖的收集,以实现数据重新赋值时,依赖该数据的部分随之变更。

而React是通过Hooks函数:useState,本质就是可以保存状态,并且可以收集依赖的函数,当下次执行时,会根据依赖重新获取更新之后的状态。

8 相关概念

vue中生命周期钩子的概念比较深,而最新的React基本废弃了生命周期的概念,不推荐使用类组件的编写方式,明确提出Hooks函数的相关概念。