vue2、vue3、react之间的优劣比较

汐夏じ

已于 2023-09-26 14:39:13 修改

阅读量340

点赞数 1

文章标签： react.js 前端 vue

于 2023-09-26 14:36:39 首次发布

本文链接：https://blog.csdn.net/CiCi____/article/details/133276714

版权

二、vue和react之间的相同点和不同点

一、vue2和vue3之间的优劣比较

1.1 vue2（选项式API）

1.1.1 使用方式

export default {
    name: '',
    components: {},
    props: {}
    data() { return {}},
    created() {},
    mounted() {},
    methods:{}
    ...
}

1.1.2 优点

比较适合中小型项目使用，
代码组织模式固定，vue2手把手教你把代码放置在哪里，可以减少费神思考

1.1.3 缺点

相同逻辑关注点的代码被拆分到了不同的选项中，上下翻看代码较为繁琐
代码逻辑复用需要通过mixins来实现，翻看代码不便，且可能造成在不同的mixins中使用了相同的变量以及函数名，从而导致引用mixins时，不知来源是哪里的
需要依赖this上下文对象访问属性,而this操作不当，易代来调用属性或方法不当等问题

1.2 vue3（组合式API）

说明：组合式API是vue3以及vue2.7+的内置功能，而vue2.6+需要配合@vue/compostion-api使用

1.2.1 使用方式

//通过在script中引入setup，即可引用组合式API
<script setup>
import {ref,reactive,onMounted} from 'vue'
// 在这里写下vue3代码
</script>

1.2.2 优点

更好的逻辑复用：通过组合函数来实现更加高效的逻辑复用（如VueUse）
更好的代码组织：同一个逻辑关注点相关的代码被归为一组。查找方便
更好的类型推导：
更小的生产包体积：<script setup>形式书写的组件模板和<script setup>中的代码位于同一作用域，被编译的模板可以直接访问<script setup>中定义的变量，无需从实例中代理。这对压缩代码更友好，因为本地变量名字可以亚索，但对象的属性名则不能。

1.2.3 缺点

没有了规定的代码组织模式，则需要加重这部分的思考，思考代码应该放在哪里

二、vue和react之间的相同点和不同点

2.1 相同点

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

2.2 不同点

数据是否可变
- React：immutable（不可变）；整体是函数式思想，数据单向流动，推崇结合immutable来实现数据不可变
- Vue：mutable（可变）；整体是响应式思想，也就是基于数据可变的，也就是对每一个属性建立Watcher，当数据发生变化时，响应式的更新对应的虚拟DOM
编译&写法
- React：all in js，通过js生成html，即jsx写法，还有通过js来操作css
- Vue：把html、css、js组合到一起，用各自的处理方式，Vue有单文件组件，可以把html、css、js写到一个文件中，html提供了模板引擎来处理。
重新渲染和优化
- React：当组件状态发生变化时，会触发React的机制使得整个组件树的重新呈现，从而可能需要使用额外的属性来避免不必要的重新渲染子组件。
- Vue：虽然Vue的重新渲染是开箱即用的，但是Vue提供了优化的重新渲染，且系统会在渲染过程中跟踪依赖关系并相应地工作。
类式组件？声明式组件？
- React：React是类式组件，api较少
- Vue：Vue是声明式组件，传入的options、api和参数都很多
路由和状态管理解决方案
- React：React提供了一种Flux/Redux架构的创新解决方案，它代表单向数据流，是著名的MVC架构替代方案。
- Vue：Vue提供了一种名为Vuex的状态管理解决方案
构建工具
- React：create-app-react
- Vue：vue-cli

2.3 Vue和React各自优势

2.3.1 React

灵活性和响应性：它提供最大的灵活性和响应能力。
丰富的JavaScript库：来自世界各地的贡献者正在努力添加更多功能。
可扩展性：由于其灵活的结构和可扩展性，React已被证明对大型应用程序更好。
不断发展： React得到了Facebook专业开发人员的支持，他们不断寻找改进方法。
web或移动平台： React提供React Native平台，可通过相同的React组件模型为iOS和Android开发本机呈现的应用程序。

2.3.2 Vue

易于使用： Vue.js包含基于HTML的标准模板，可以更轻松地使用和修改现有应用程序。
更顺畅的集成：无论是单页应用程序还是复杂的Web界面，Vue.js都可以更平滑地集成更小的部件，而不会对整个系统产生任何影响。
更好的性能，更小的尺寸：它占用更少的空间，并且往往比其他框架提供更好的性能。
精心编写的文档：通过详细的文档提供简单的学习曲线，无需额外的知识; HTML和JavaScript将完成工作。
适应性：整体声音设计和架构使其成为一种流行的JavaScript框架。它提供无障碍的迁移，简单有效的结构和可重用的模板。

2.4 应用场景

2.4.1 React

构建一个大型应用项目时：React的渲染系统可配置性更强，和React的测试工具结合起来使用，使代码的可测试性和可维护性更好。大型应用中透明度和可测试性至关重要。
同时适用于Web端和原生APP时：React Native是一个使用Javascript构建移动端原生应用程序（iOS，Android）的库。它与React.js相同，只是不使用Web组件，而是使用原生组件。