React和Vue区别，以及注意事项

目录

一、语法和框架特性的差异

二、开发习惯和注意事项

三、特别注意事项

一、语法和框架特性的差异

1. 模板语法：
   • Vue使用了类似于传统HTML的模板语法，通过双大括号{{ }}进行插值，而React则使用了JSX语法。
   • 在Vue中，你可以直接在模板中使用指令（如v-if、v-for等），而在React中，你需要通过JSX和JavaScript逻辑来实现相同的功能。
2. 组件化开发：
   • Vue和React都支持组件化开发，但Vue的组件需要在<template>、<script>和<style>标签中分别定义HTML结构、JavaScript逻辑和CSS样式，而React的组件则通常在一个.jsx或.js文件中定义所有内容。
   • Vue的组件可以通过props接收数据，并通过emit事件向父组件发送消息，而React的组件则通过props接收数据，并通过回调函数或Context API等方式与父组件通信。
3. 状态管理：
   • Vue提供了响应式的数据绑定机制，可以更方便地进行数据的读取和更新。相比之下，React需要通过构建有状态的组件和手动管理组件的状态来实现类似的功能。
   • Vuex是Vue的状态管理模式和库，用于集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。React也有类似的状态管理库，如Redux和MobX。

二、开发习惯和注意事项

1. 样式管理：
   • 在Vue中，如果使用了scoped样式，父组件的样式不会影响到子组件。但是，如果子组件的最外层元素的class与父组件中的class名称一样，且两个组件的style标签中都加了scoped，那么父组件的样式仍然可能会影响到子组件。为了避免这种情况，可以在子组件的最外层再套一层div或者改用不一样的class名。
   • 在Vue 3的<style>标签中，不能使用:global，否则运行会报错。
2. props的使用：
   • 在Vue中，props必须在props字段里声明，且在使用时不能直接在模板中对其进行修改。如果需要对props进行转换或计算，可以使用计算属性（computed）或方法（methods）。
   • 当组件中props参数使用默认值时，不能直接在组件中元素的style中直接使用，这样样式会无效。解决办法就是将元素所需的style对象用computed方法返回。
   • 类型为boolean的且不是必传的props属性值，在使用时且没有传值时，拿到的值一直是false，而不是undefined。因此，不能写是否等于undefined来处理业务逻辑。
3. 生命周期和钩子函数：
   • Vue和React都有生命周期和钩子函数的概念，但它们的触发时机和用途有所不同。例如，Vue的mounted钩子函数在组件挂载完成后调用，而React的componentDidMount方法也在组件挂载后立即调用。但是，Vue的watch监听器可以在数据变化时执行特定的逻辑，而React则需要在componentDidUpdate或useEffect的依赖数组中指定要监听的变量。
4. 第三方库的使用：
   • 如果使用了某些特定的第三方库（如echarts），在Vue和React中的使用方式可能会有所不同。例如，在Vue中使用echarts时，需要将echarts图表标记为不可被转为代理（使用markRaw方法），否则可能会导致某些功能无法正常工作。
5. 构建工具和配置文件：
   • Vue和React通常使用不同的构建工具（如Vue CLI和Create React App）和配置文件（如vue.config.js和package.json中的scripts部分）。因此，在转换项目时，需要熟悉新的构建工具和配置文件的使用方法。

三、特别注意事项

1. 性能优化：虽然Vue和React在性能方面相差无几，但在某些场景下，Vue可能具有更好的性能表现。例如，Vue采用了虚拟DOM及其独特的渲染机制，可以更好地管理DOM更新和渲染。然而，这并不意味着你可以忽视性能优化问题。在开发过程中，仍然需要关注组件的渲染效率、避免不必要的重新渲染等问题。
2. 生态系统和工具支持：Vue和React都拥有庞大的社区和丰富的生态系统。在转换项目时，可以充分利用这些资源和工具来加速开发过程。例如，你可以使用Vue的官方CLI工具来快速创建和构建项目，或者使用Vuex和Vue Router等官方库来管理状态和路由。同时，也可以关注Vue的社区插件和扩展库，以获取更多的功能和支持。
3. 代码风格和团队规范：在转换项目时，需要遵循团队的代码风格和规范。这包括命名约定、缩进方式、注释风格等方面。同时，也需要与团队成员进行充分的沟通和协作，以确保项目的顺利进行和代码的质量。