React 和 Vue 的不同编程模型

简介: React 和 Vue 的不同编程模型

1、Vue 的编程模型

接触 Vue 的开发者应该都知道,在 Vue 中一旦内部数据改变了,视图就会随之更新,这是因为 Vue 的 数据响应式原理:Vue 对其构造选项 options 的 data 中的数据进行了篡改并监听,一旦监听数据发生变化,Vue 就会去刷新视图。

在 Vue 的编程模型中,一个数据对象对应一个虚拟 DOM 节点,当对象的属性改变时,Vue 就会将相关的 DOM 节点全部更新。

2、React 的编程模型

由于 React 没有像 Vue 一样,对其内部数据 state 进行监听,这就使得 React 不知道其内部数据什么时候改变了,只有开发人员知道,所以需要开发人员在改变 state 数据时调用 setState() 或 setN() 去 异步 刷新视图。


而且 React 提倡的时数据不可变理念,当开发人员需要改变内部数据 state 时,不建议修改旧的 state,而是声明新的 state 将旧的 state 进行覆盖。

在 React 的编程模型,一个对象对应一个虚拟DOM,另一个对象,对应另一个虚拟 DOM。对比两个虚拟DOM,找不同(DOM diff),最后局部更新DOM


3、两个框架的不同理念

React 的理念是 数据不可变,它会通过 setN() 声明 新数据,而 Vue 的理念是 数据响应式,它提倡改变原数据。

目录
相关文章
|
2月前
|
前端开发 JavaScript Java
SpringBoot项目部署打包好的React、Vue项目刷新报错404
本文讨论了在SpringBoot项目中部署React或Vue打包好的前端项目时,刷新页面导致404错误的问题,并提供了两种解决方案:一是在SpringBoot启动类中配置错误页面重定向到index.html,二是将前端路由改为hash模式以避免刷新问题。
209 1
|
9天前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】React与Vue:前端框架的巅峰对决与选择策略
|
9天前
|
前端开发 JavaScript 数据管理
React与Vue:两大前端框架的较量与选择策略
【10月更文挑战第23天】React与Vue:两大前端框架的较量与选择策略
|
9天前
|
JavaScript 前端开发 算法
在性能上,React和Vue有什么区别
【10月更文挑战第23天】在性能上,React和Vue有什么区别
9 1
|
15天前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
24天前
|
设计模式 JavaScript 前端开发
vue的MVVM模型
MVVM(Model-View-ViewModel)是Vue框架的核心设计模式,将应用分为模型(数据和业务逻辑)、视图(用户界面)和视图模型(数据转换与用户交互)。其特点包括数据驱动、组件化、双向数据绑定及响应式,提高了开发效率和应用质量。【10月更文挑战第2天】
|
2月前
|
前端开发 JavaScript UED
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
在React或Vue中,若需在更改用户所属组后更新页面所有数据但不刷新整个页面,可以通过改变路由出口的key值来实现。在用户切换组成功后,更新key值,这会触发React或Vue重新渲染路由出口下的所有组件,从而请求新的数据。这种方法避免了使用`window.location.reload()`导致的页面闪烁,提供了更流畅的用户体验。
52 1
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
|
9天前
|
前端开发 JavaScript 开发者
React与Vue:前端框架的巅峰对决与选择策略
【10月更文挑战第23天】 React与Vue:前端框架的巅峰对决与选择策略
|
9天前
|
JavaScript 前端开发 数据管理
React和Vue的优缺点
【10月更文挑战第23天】React和Vue的优缺点
6 0
|
9天前
|
开发框架 JavaScript 前端开发
React和Vue之间的区别是什么
【10月更文挑战第23天】React和Vue之间的区别是什么
9 0