为什么Vue和React都抛弃了面向对象写法 ？
Vue 和 React 并没有“抛弃”面向对象的写法，更准确地说，它们没有将面向对象作为主要的、官方推崇的开发范式。这其中有历史原因、技术发展趋势以及它们各自的设计哲学使然。我们可以从几个方面来详细解读：
1. JavaScript 的演进：从原型链到函数式思维
首先，我们需要理解 JavaScript 本身在面向对象上的独特性。JavaScript 的面向对象并非传统意义上的类（Class）继承，而是基于原型链（Prototype Chain）。这使得 JavaScript 在实现面向对象时，比 C++ 或 Java 等语言更为灵活，但也可能导致一些开发者感到困惑。
早期 JavaScript 的面向对象：在 ES6 之前，开发者通常通过构造函数（Constructor Functions）和原型（Prototypes）来模拟类和继承，这确实是一种面向对象的写法。
ES6 的 Class 语法糖：ES6 引入了 `class` 关键字，这在语法层面大大简化了面向对象的实现，让 JavaScript 的面向对象写法更接近传统语言。然而，这本质上仍然是原型链的语法糖，并没有改变 JavaScript 底层的运行机制。
Vue 和 React 出现和流行的时期，正是 JavaScript 语言以及前端开发实践快速发展的时期。开发者们在追求更简洁、更高效的开发模式。
2. 组件化开发的兴起：关注点分离与复用
现代前端开发的基石是组件化。组件是将UI拆分成独立、可复用的小单元，每个组件封装了自己的逻辑、样式和模板。
Vue 的 Single File Components (SFCs)：Vue 提供了 `.vue` 文件，将模板（HTML）、脚本（JavaScript/TypeScript）和样式（CSS/SCSS）集中在一起。这种方式在逻辑上是组件化的，但其脚本部分仍然可以使用面向对象的方式（例如，通过 `Vue.extend` 或 `export default { ... }` 导出组件选项对象），只不过更常见的写法是导出一个包含 `data`、`methods`、`computed` 等属性的选项对象（Options API）。
React 的函数式组件和 Hooks：React 从一开始就强调组件化，并且随着时间推移，其发展趋势更加倾向于函数式编程（Functional Programming）的思想。
JSX：React 使用 JSX 来声明式地描述 UI，它更像是 JavaScript 的一个扩展，而不是模板语言。
Hooks：React Hooks 的出现是推动函数式组件成为主流的关键。Hooks 允许开发者在函数组件中使用 state 和其他 React 特性，而无需编写类组件。这使得组件逻辑可以更好地被提取和复用，也让组件的代码结构更扁平、更易于理解。
为什么函数式思维更契合组件化？
声明式 UI：函数式编程强调“做什么”（What）而不是“怎么做”（How）。React 的 JSX 和 Hooks 使得组件的渲染过程更像一个纯函数：接收 props，返回 UI 描述。这使得 UI 的行为更容易预测，也更便于进行状态管理和事件处理。
组合性：函数式编程强调组合。组件本身就是一种组合的天然方式。通过函数组合，可以将逻辑和UI进行更细粒度的拆分和重组。
纯函数：虽然 React 组件不一定是严格的纯函数（因为会受到 props 和 state 的影响），但函数式组件的理念是让组件的渲染尽可能地接近纯函数，减少副作用。
可测试性：函数式组件，尤其是那些遵循纯函数思想的组件，通常更容易进行单元测试。
3. 避免“副作用”和“状态突变”的倾向
面向对象编程中，对象的状态（state）是核心。而管理对象的状态，特别是多组件之间共享和修改状态，往往容易引入副作用（Side Effects）和状态突变（State Mutation），这会使得代码变得难以追踪和调试。
Vue 的 Options API：虽然 Vue 的 Options API 也可以算是一种“对象”的组织方式，但其 `data` 是一个函数，返回一个对象。这避免了组件之间状态共享时，如果 `data` 是一个普通对象，所有实例会共享同一个 `data` 的问题。然而，在组件内部，`this.data.someProperty` 的修改仍然是直接突变。
React 的 Hooks (useState, useReducer)：React 的 Hooks，特别是 `useState` 和 `useReducer`，提倡的是不可变更新（Immutable Updates）。当你需要更新 state 时，你会创建一个新的 state 对象，而不是直接修改原有的 state。这种方式虽然在写法上可能显得稍微“啰嗦”（需要复制对象），但极大地减少了副作用，使得状态变化可追踪，并且更容易与 React 的渲染机制（如 diffing 算法）协同工作。
Redux / Zustand / Vuex：这些状态管理库的流行，也从侧面印证了开发者对可预测状态管理的追求。它们的核心思想往往也与函数式编程有关，例如 Redux 的 reducer 就是一个纯函数，接收旧 state 和 action，返回新 state。
4. 社区的推动和生态系统的影响
框架的流行程度也受社区和生态系统发展的影响。
React 的函数式浪潮：随着 React 社区中函数式编程思潮的不断深入，Hooks 的出现进一步巩固了函数式组件的主流地位。大量的教程、库和第三方组件都优先支持 Hooks API。
Vue 的 Composition API：Vue 3推出的 Composition API，虽然提供了另一种组织组件逻辑的方式，但其核心设计也受到了函数式编程和更好地逻辑复用的影响。它允许开发者将相关的逻辑封装在可复用的函数中，这与函数式编程的理念非常契合。Composition API 的出现，也让 Vue 社区的开发者能够以更灵活、更函数式的方式来编写组件，而不是局限于 Options API 的面向对象风格。
总结一下，Vue 和 React 并非完全“抛弃”了面向对象，而是：
1. JavaScript 语言本身的演进：从原生原型到 Class 语法糖，JavaScript 的面向对象变得更易用，但框架更倾向于利用其函数式特性。
2. 组件化开发的最佳实践：函数式思维和声明式 UI 更符合组件化开发的理念，能够更好地实现关注点分离、可复用性和可预测性。
3. 对状态管理的追求：函数式方法（如不可变更新、纯函数 reducer）能更好地管理复杂的状态，减少副作用。
4. 社区和生态系统的推动：Hooks 和 Composition API 等新特性的出现，进一步引导了开发趋势，鼓励更函数式的组件编写方式。
这并不意味着面向对象就“不好”，而是说在当前的前端开发语境下，函数式编程的理念和实践，在构建大型、可维护、可预测的前端应用方面，展现出了更强的优势，并成为了 Vue 和 React 的主流开发范式。开发者仍然可以在 Vue 的 Options API 中使用 `this` 来访问组件实例和方法，这本质上也是一种对象导向的交互方式，但整体上，框架的设计哲学和推荐的开发模式，已经向函数式和组合式倾斜。
1. JavaScript 的演进：从原型链到函数式思维
首先，我们需要理解 JavaScript 本身在面向对象上的独特性。JavaScript 的面向对象并非传统意义上的类（Class）继承，而是基于原型链（Prototype Chain）。这使得 JavaScript 在实现面向对象时，比 C++ 或 Java 等语言更为灵活，但也可能导致一些开发者感到困惑。
早期 JavaScript 的面向对象：在 ES6 之前，开发者通常通过构造函数（Constructor Functions）和原型（Prototypes）来模拟类和继承，这确实是一种面向对象的写法。
ES6 的 Class 语法糖：ES6 引入了 `class` 关键字，这在语法层面大大简化了面向对象的实现，让 JavaScript 的面向对象写法更接近传统语言。然而，这本质上仍然是原型链的语法糖，并没有改变 JavaScript 底层的运行机制。
Vue 和 React 出现和流行的时期，正是 JavaScript 语言以及前端开发实践快速发展的时期。开发者们在追求更简洁、更高效的开发模式。
2. 组件化开发的兴起：关注点分离与复用
现代前端开发的基石是组件化。组件是将UI拆分成独立、可复用的小单元，每个组件封装了自己的逻辑、样式和模板。
Vue 的 Single File Components (SFCs)：Vue 提供了 `.vue` 文件，将模板（HTML）、脚本（JavaScript/TypeScript）和样式（CSS/SCSS）集中在一起。这种方式在逻辑上是组件化的，但其脚本部分仍然可以使用面向对象的方式（例如，通过 `Vue.extend` 或 `export default { ... }` 导出组件选项对象），只不过更常见的写法是导出一个包含 `data`、`methods`、`computed` 等属性的选项对象（Options API）。
React 的函数式组件和 Hooks：React 从一开始就强调组件化，并且随着时间推移，其发展趋势更加倾向于函数式编程（Functional Programming）的思想。
JSX：React 使用 JSX 来声明式地描述 UI，它更像是 JavaScript 的一个扩展，而不是模板语言。
Hooks：React Hooks 的出现是推动函数式组件成为主流的关键。Hooks 允许开发者在函数组件中使用 state 和其他 React 特性，而无需编写类组件。这使得组件逻辑可以更好地被提取和复用，也让组件的代码结构更扁平、更易于理解。
为什么函数式思维更契合组件化？
声明式 UI：函数式编程强调“做什么”（What）而不是“怎么做”（How）。React 的 JSX 和 Hooks 使得组件的渲染过程更像一个纯函数：接收 props，返回 UI 描述。这使得 UI 的行为更容易预测，也更便于进行状态管理和事件处理。
组合性：函数式编程强调组合。组件本身就是一种组合的天然方式。通过函数组合，可以将逻辑和UI进行更细粒度的拆分和重组。
纯函数：虽然 React 组件不一定是严格的纯函数（因为会受到 props 和 state 的影响），但函数式组件的理念是让组件的渲染尽可能地接近纯函数，减少副作用。
可测试性：函数式组件，尤其是那些遵循纯函数思想的组件，通常更容易进行单元测试。
3. 避免“副作用”和“状态突变”的倾向
面向对象编程中，对象的状态（state）是核心。而管理对象的状态，特别是多组件之间共享和修改状态，往往容易引入副作用（Side Effects）和状态突变（State Mutation），这会使得代码变得难以追踪和调试。
Vue 的 Options API：虽然 Vue 的 Options API 也可以算是一种“对象”的组织方式，但其 `data` 是一个函数，返回一个对象。这避免了组件之间状态共享时，如果 `data` 是一个普通对象，所有实例会共享同一个 `data` 的问题。然而，在组件内部，`this.data.someProperty` 的修改仍然是直接突变。
React 的 Hooks (useState, useReducer)：React 的 Hooks，特别是 `useState` 和 `useReducer`，提倡的是不可变更新（Immutable Updates）。当你需要更新 state 时，你会创建一个新的 state 对象，而不是直接修改原有的 state。这种方式虽然在写法上可能显得稍微“啰嗦”（需要复制对象），但极大地减少了副作用，使得状态变化可追踪，并且更容易与 React 的渲染机制（如 diffing 算法）协同工作。
Redux / Zustand / Vuex：这些状态管理库的流行，也从侧面印证了开发者对可预测状态管理的追求。它们的核心思想往往也与函数式编程有关，例如 Redux 的 reducer 就是一个纯函数，接收旧 state 和 action，返回新 state。
4. 社区的推动和生态系统的影响
框架的流行程度也受社区和生态系统发展的影响。
React 的函数式浪潮：随着 React 社区中函数式编程思潮的不断深入，Hooks 的出现进一步巩固了函数式组件的主流地位。大量的教程、库和第三方组件都优先支持 Hooks API。
Vue 的 Composition API：Vue 3推出的 Composition API，虽然提供了另一种组织组件逻辑的方式，但其核心设计也受到了函数式编程和更好地逻辑复用的影响。它允许开发者将相关的逻辑封装在可复用的函数中，这与函数式编程的理念非常契合。Composition API 的出现，也让 Vue 社区的开发者能够以更灵活、更函数式的方式来编写组件，而不是局限于 Options API 的面向对象风格。
总结一下，Vue 和 React 并非完全“抛弃”了面向对象，而是：
1. JavaScript 语言本身的演进：从原生原型到 Class 语法糖，JavaScript 的面向对象变得更易用，但框架更倾向于利用其函数式特性。
2. 组件化开发的最佳实践：函数式思维和声明式 UI 更符合组件化开发的理念，能够更好地实现关注点分离、可复用性和可预测性。
3. 对状态管理的追求：函数式方法（如不可变更新、纯函数 reducer）能更好地管理复杂的状态，减少副作用。
4. 社区和生态系统的推动：Hooks 和 Composition API 等新特性的出现，进一步引导了开发趋势，鼓励更函数式的组件编写方式。
这并不意味着面向对象就“不好”，而是说在当前的前端开发语境下，函数式编程的理念和实践，在构建大型、可维护、可预测的前端应用方面，展现出了更强的优势，并成为了 Vue 和 React 的主流开发范式。开发者仍然可以在 Vue 的 Options API 中使用 `this` 来访问组件实例和方法，这本质上也是一种对象导向的交互方式，但整体上，框架的设计哲学和推荐的开发模式，已经向函数式和组合式倾斜。
网友意见
居然看到一个人说面向对象继承缺点的。什么组合重于继承。什么继承容易耦合。
我就想问一句，编程语言的特性是否需要考虑业务层面的高耦合还是低耦合？
我感觉这只是看到了他那一层的问题，就是应用层。
我们用react, vue，我们做的界面实现的是简单界面业务，本质上组合一下，做点体力活就行了。所以强调的是容易理解，使用方便，任何人能快速上手。
业务层面的耦合低想得是，一个人干的事最好不要影响其他人。你这块写的不好，你辞职了，大不了找个人替代你，快速上手，能顶上来。
但是react, vue这样的复杂库的实现，能这样做吗？这些库的维护人员核心就那点人，讲究的是高复用，高重构，要去掉冗余，要抽象复杂性，每个改动都要小心设计。耦合是不是高并不重要。所以从js换到了typescript。因为需要类型，需要继承，需要小心的设计接口。
还有即使你现在写的没用class,不表达没有继承，class本质还是原型链继承。。
类似的话题
-
Vue 和 React 并没有“抛弃”面向对象的写法，更准确地说，它们没有将面向对象作为主要的、官方推崇的开发范式。这其中有历史原因、技术发展趋势以及它们各自的设计哲学使然。我们可以从几个方面来详细解读： 1. JavaScript 的演进：从原型链到函数式思维首先，我们需要理解 JavaScrip............. -
Vue 和 React 都是目前非常流行的 JavaScript 前端框架，它们都旨在帮助开发者构建用户界面。虽然它们在很多方面有相似之处，但各自的优缺点也使得它们在不同的场景下有不同的适用性。下面我们来详细分析一下 Vue 和 React 的优点： Vue.js 的优点：Vue.js 以其易用性、.............
-
Vue.js 在全球范围内仍然是一个非常受欢迎且有影响力的前端框架，尤其是在亚洲市场，它拥有庞大的开发者社区和广泛的应用。要说“越来越没影响力”可能是一种相对的、与某些新兴技术或更具颠覆性解决方案的比较而言的观点。然而，如果从某些角度审视，确实存在一些因素可能导致 Vue 的相对影响力增长放缓，或者.............
-
关于 Vue 的更新记录未提供中文，以及中文文档滞后这个问题，这确实是许多中文 Vue 用户和开发者都关心的一个痛点。要详细解释这个问题，我们需要从几个方面来分析：1. 核心开发团队的构成与资源分配Vue.js 的核心开发是围绕着 Evan You 和一个相对精简的核心团队进行的。他们的主要精力自然.............
-
最近几年，如果你留心招聘信息或者和同行交流，一个词出现的频率是越来越高，那就是——Vue。放眼望去，无论是刚起步的创业公司，还是BAT这样的大厂，都涌现出越来越多的Vue项目。这背后究竟是什么原因，让Vue如此受到大家的青睐？我从业这些年，也确实观察到了一些变化，今天就想跟大家伙儿聊聊，为什么前端用.............
-
关于“尤大说 React 性能不如 Vue”这个说法，需要先明确一点：尤雨溪（Vue.js 的作者）并没有公开、明确地断言“Vue.js 的性能在所有场景下都优于 React”。事实上，在性能优化这件事上，开发者社区的共识是：对于绝大多数应用来说，React 和 Vue.js 之间的性能差异微乎其微.............
-
在前端开发领域，当我们谈论 React 或 Vue 这类框架时，经常会听到“生命周期”这个概念。这可不是凭空出现的，而是为了更好地管理和控制我们编写的组件在整个“生存”过程中所经历的各个阶段。想象一下，一个组件就像一个小小的生命体，它也有自己的诞生、成长、工作和最终消失的过程。前端框架正是为了给开发.............
-
Vue 等前端框架最直接、最核心的作用，用最朴实的话说，就是让前端开发变得更“容易”，更“有条理”，而且最终交付的东西（网页应用）能更“好用”。别看这句话好像很简单，但里面包含了好多学问。要讲透了，就得从“为什么”说起。想想没有框架之前，我们是怎么做网页的？早期，网页更多的是展示信息，内容是静态的，.............
-
Vuex 的出现，说白了，是为了解决 Vue 应用中越来越棘手的状态管理问题。当你的 Vue 项目还小的时候，组件之间通信可能还好说，几个 props 传递，或者简单的 $emit、$on 就能应付。但随着项目规模的扩张，组件层级变深，组件之间的关联变得复杂，你会发现：1. 组件间通信的混乱和难以维.............
-
近年来，自由主义在全球范围内的影响力确实呈现出明显的衰落趋势，这一现象涉及经济、政治、社会、技术、文化等多个层面的复杂互动。以下从多个维度详细分析自由主义衰落的原因： 一、经济全球化与贫富差距的加剧1. 自由主义经济政策的局限性 自由主义经济学强调市场自由、私有化、减少政府干预，但其在21世.............
-
俄乌战争期间，虚假信息（假消息）的传播确实非常广泛，其背后涉及复杂的国际政治、媒体运作、技术手段和信息战策略。以下从多个角度详细分析这一现象的成因： 1. 信息战的直接动因：大国博弈与战略竞争俄乌战争本质上是俄罗斯与西方国家（尤其是美国、北约）之间的地缘政治冲突，双方在信息领域展开激烈竞争： 俄罗斯.............
-
政府与军队之间的关系是一个复杂的政治与军事体系问题，其核心在于权力的合法性和制度性约束。虽然政府本身可能不直接持有武器，但通过法律、组织结构、意识形态和历史传统，政府能够有效指挥拥有武器的军队。以下是详细分析： 一、法律授权与国家主权1. 宪法与法律框架 政府的权力来源于国家宪法或法律。例如.............
-
关于“传武就是杀人技”的说法，这一观点在历史、文化和社会语境中存在一定的误解和偏见。以下从历史、文化、现代演变和误解来源等多个角度进行详细分析： 一、历史背景：武术的原始功能与社会角色1. 自卫与生存需求 中国传统武术（传武）的起源与农耕社会、游牧民族的生存环境密切相关。在古代，武术的核心功.............
-
关于近代历史人物是否能够“翻案”的问题，需要结合历史背景、人物行为对国家和民族的影响，以及历史评价的客观性进行分析。袁世凯和汪精卫作为中国近代史上的重要人物，其历史评价确实存在复杂性和争议性，但“不能翻案”的结论并非基于单一因素，而是综合历史、政治、道德等多方面考量的结果。以下从历史背景、人物行为、.............
-
关于“俄爹”这一称呼，其来源和含义需要从多个角度分析，同时要明确其不尊重的性质，并指出如何正确回应。以下是详细解析和反驳思路： 一、称呼的来源与可能的含义1. 可能的字面拆解 “俄”是“俄罗斯”的拼音首字，而“爹”在中文中通常指父亲，带有亲昵或戏谑的意味。 若将两者结合，可能暗示.............
-
民国时期（19121949）虽然仅持续约37年，却涌现出大量在文学、艺术、科学、政治、哲学等领域具有划时代意义的“大师级人物”。这一现象的出现，是多重历史、社会、文化因素共同作用的结果。以下从多个维度进行详细分析： 一、思想解放与文化启蒙的浪潮1. 新文化运动（19151923） 思想解放.............
-
航空航天领域在待遇和职业环境上确实存在一定的挑战，但国家在该领域取得的飞速发展，主要源于多方面的国家战略、技术积累和系统性支持。以下从多个维度详细分析这一现象： 一、国家战略与长期投入：推动技术突破的核心动力1. 国家层面的战略目标 航空航天技术往往与国家的科技竞争力、国家安全和国际地位密切.............
-
吴京作为中国知名演员、导演，近年来因《战狼2》《英雄联盟》等作品及个人生活引发公众关注，其形象和言论在不同语境下存在争议，导致部分人对其产生负面评价。以下从多个角度详细分析可能的原因： 1. 个人生活与公众形象的冲突 妻子被曝光：2018年，吴京妻子的近照和视频被网友扒出，引发舆论争议。部分人.............
-
近年来，全球范围内对乌克兰的支持确实呈现出显著增加的趋势，这一现象涉及多重因素，包括国际局势、地缘政治博弈、信息传播、经济援助、民族主义情绪以及国际社会的集体反应。以下从多个角度详细分析这一现象的成因： 1. 俄乌战争的爆发与国际社会的集体反应 战争的爆发：2022年2月，俄罗斯对乌克兰发动全面入侵.............
-
《是大臣》《是首相》等政治剧之所以能在编剧缺乏公务员经历的情况下取得成功，主要源于以下几个关键因素的综合作用： 1. 构建政治剧的底层逻辑：制度与权力的结构性认知 政治体制的系统性研究：编剧可能通过大量研究英国议会制度、政府运作流程、政党政治规则（如议会制、内阁制、党鞭系统等）来构建剧情。例如.............
本站所有内容均为互联网搜索引擎提供的公开搜索信息，本站不存储任何数据与内容，任何内容与数据均与本站无关，如有需要请联系相关搜索引擎包括但不限于百度，google,bing,sogou 等
© 2025 tinynews.org All Rights Reserved. 百科问答小站 版权所有