1.模板和jsx
- vue：vue把html,css,js组合到一起，使用了基于HTML的模板语法，允许开发者采用简洁的模板语法来声明式地将数据渲染进DOM中。
- react：HTML语言直接写在JS中，不加任何引号，也就是JSX语法，它允许HTML和JS混写
2.状态管理
- vue：数据由data属性在vue对象中进行管理
- react：数据由State属性管理，但不能直接改变State的状态，需要通过setState()去更新
3.组件嵌套
- vue：通过slot插槽进行嵌套传递
- react：通过props.children的方式将标签内的部分传递给子组件
4.条件渲染和列表渲染
- vue：条件渲染 v-if,v-show
- vue：列表渲染 v-for
- react：条件渲染 逻辑运算符&&||，三目运算符
- react：列表渲染 {}在jsx内构建使用map()遍历数组
5.组件间的通信传值
- vue： 父传子：通过父组件绑定自定义属性（或通过v-bind绑定动态属性），子组件使用 props 选项时显式的声明props，以便它可以从父组件接收到期望的数据。 子传父：通过父组件绑定自定义事件，子组件通过this.emit('自定义事件',value)传值。 非父子：可以使用一个空的 Vue 实例绑定在Vue实例的原型上作为一个事件总线中心(vue.prototype.eventBus = new Vue())，用emit触发事件，on监听事件。
- react: 父传子：通props属性进行传递。 子传父：父组件定义事件，子组件触发父组件中的事件时，通过实参的形式来改变父组件中的数据来通信。 非父子：嵌套不深的非父子组件可以使共同父组件，嵌套的深可以用redux共享状态。
6.路由管理
vue-router是全局配置方式，vue-router任何路由组件都会被渲染到位置。 react-router是全局组件方式，react-router子组件作为children被传入父组件。
相同点
- 组件化
- 虚拟Dom
- 配套框架，连个框架都专注于UI层，其他的功能如路由，状态管理等都交由同伴框架进行处理 ４．构建工具：React可以使用Create React APP，而vue对应的是vue－cli
大项目使用React的原因
React的单向数据流更适合构建大型和可维护的应用程序，而Vue的双向数据绑定在构建大型应用时可能面临一些挑战，这主要基于以下几个原因：
React单向数据流的优势
-
数据流清晰：
- React采用单向数据流的设计理念，数据只能由父组件流向子组件，子组件不能直接修改父组件的数据。这种设计使得数据流的路径非常清晰，易于追踪和理解。
- 在大型应用中，数据流可能变得非常复杂。React的单向数据流模型有助于避免数据流的混乱，使得开发者能够更容易地理解和维护代码。
-
可维护性高：
- 由于数据流清晰，React应用中的状态变更更加可预测和可控。这有助于减少潜在的bug，提高应用的稳定性。
- React的组件化开发方式使得每个组件都可以独立地进行测试和维护，进一步提高了应用的可维护性。
-
易于调试：
- 在React中，由于数据流是单向的，当出现问题时，开发者可以更容易地定位到问题的源头。
- React还提供了强大的开发者工具，如React DevTools，这些工具可以帮助开发者更好地理解和调试应用中的状态变更。
Vue双向数据绑定的挑战
-
数据流复杂：
- Vue采用双向数据流的设计理念，数据可以在父组件和子组件之间双向流动。这种设计虽然简化了某些场景下的开发过程，但在大型应用中可能导致数据流的混乱。
- 当多个组件之间存在复杂的数据依赖关系时，双向数据流可能会使得数据的变化难以预测和控制。
-
性能开销：
- 双向数据绑定需要在内部进行数据监听和更新，这会带来一定的性能开销。特别是在数据量较大或嵌套较深的情况下，双向数据绑定可能会影响页面的响应速度和性能表现。
-
调试困难：
- 由于双向数据流的存在，当应用出现问题时，定位错误的具体位置和原因可能会比较困难。
- 在多个组件之间存在复杂的数据依赖关系时，调试和排查问题可能需要花费较多的时间和精力。
-
安全性风险：
- 双向数据绑定可能会增加一些安全性风险。特别是在处理用户输入时，如果没有进行严格的数据验证和过滤，可能会导致潜在的安全漏洞。
综上所述，React的单向数据流由于其清晰的数据流路径、高可维护性、易于调试以及强大的开发者工具支持等特点，更适合构建大型和可维护的应用程序。而Vue的双向数据绑定虽然在某些场景下简化了开发过程，但在构建大型应用时可能面临数据流复杂、性能开销大、调试困难以及安全性风险等挑战。因此，在选择前端框架时，需要根据项目的具体需求和团队的实际情况进行综合考虑。
虚拟DOM的优缺点
优点：
- 批量更新 虚拟DOM可以将多个DOM操作合并为一次更新。它会在内部进行比较和计算，找出最小的变更集，并批量应用于真实的DOM树。这种批量更新可以减少浏览器的重排和重绘，从而提高性能。
- 局部更新 通过比较新旧虚拟DOM树，只有发生变化的部分会被重新渲染到真实的DOM中，而不需要重新渲染整个组件。这可以避免不必要的DOM操作，减少性能开销。
- 跨平台 虚拟DOM与底层平台无关，因此它可以在不同环境（例如浏览器、移动端、服务器端）进行渲染。这种可移植性使得使用虚拟DOM能够更轻松地在不同平台之间共享和重用代码。
缺点：
- 额外的内存占用：在运行时，虚拟DOM需要维护一个表示整个组件树的数据结构，这可能会占用额外的内存。
- 操作的复杂度：虚拟DOM需要进行比较、计算和递归遍历等操作，这可能导致一些额外的计算开销。
