文章目录
概要
提示：软件开发中，前端框架扮演着至关重要的角色。它们是用于构建用户界面的工具集，可以大大提高开发效率和代码质量。然而，面对众多的前端框架选择，我们该如何进行区别和选型呢？本文将帮助你了解前端框架的区别，并提供一些选择前端框架的指导。解决你选择前端框架的困惑。
前端框架众多，各有特色。主流框架包括React、Vue.js和Angular。也是企业公司里用的最多的前端主流框架。
React用法以及示例
提示：React 起源于 Facebook 的内部项目，在2013年5月开源。 由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，它也是 Web 开发的主流工具之一。
作用：
- 替代DOM操作：通过虚拟DOM技术，React能够高效地更新和渲染UI，减少直接操作DOM带来的性能问题。
- 组件化开发：React鼓励开发者将UI拆分成独立的、可复用的组件，提高了代码的可维护性和可重用性。
- 声明式编程：React使开发者能够以声明的方式描述UI，代码更加简洁易读。
用法上，React通常与JSX语法一起使用，JSX是一种JavaScript的语法扩展，允许在JavaScript代码中编写类似HTML的标记。
开发者通过定义组件，并在组件中编写JSX来构建UI。React还提供了丰富的API和Hooks，如useState、useEffect等，用于处理组件的状态和副作用，进一步增强了React的功能和灵活性。
以下是一个简单的React示例，它创建了一个名为App的组件，该组件显示一条欢迎消息。
import React from 'react';
function App() {
return (
<div>
<h1>Hello, React!</h1>
</div>
);
}
//这行代码在JavaScript（特别是在使用ES6模块或更高版本的模块系统时）中用于导出模块。
//在这个上下文中，它表示将App组件作为该文件的默认导出。
export default App;
在这个例子中，App是一个函数组件，它返回了一个JSX元素。这个元素是一个div，其中包含一个h1标签，h1标签的文本内容是“Hello, React!”。
要在浏览器中运行这个React组件，你需要做几件事情：
-
创建一个React应用（如果你还没有的话）。你可以使用create-react-app来快速开始。
以下是如何使用 create-react-app 创建一个新的 React 应用程序的示例：
首先，确保你已经安装了 Node.js。create-react-app 需要 Node.js 8.10 或更高版本。
打开终端或命令提示符（win+r）输入cmd回车，并运行以下命令来全局安装 create-react-app：
npx create-react-app my-app这里，my-app 是你的应用程序的名称，你可以根据需要更改它。
创建应用程序后，进入应用程序目录：
cd my-app你现在可以启动开发服务器了：
npm start运行此命令后，create-react-app 将启动一个本地开发服务器，并且通常会在浏览器中自动打开你的应用程序。
现在，你可以开始编辑应用程序了。打开 src/App.js 文件，你会看到一个简单的 React 组件。你可以修改这个文件来更改应用程序的行为。
当你对应用程序进行更改并保存文件时，create-react-app 将自动重新编译应用程序，并且浏览器将刷新以显示最新的更改。
当你准备将应用程序部署到生产环境时，你可以运行以下命令来构建应用程序：
npm run build这将创建一个 build 目录，其中包含你的应用程序的生产版本。你可以将这个目录部署到任何静态文件服务器。
这就是使用 create-react-app 创建并启动一个新的 React 应用程序的基本过程。
-
组件化开发：React鼓励开发者将UI拆分成独立的、可复用的组件，提高了代码的可维护性和可重用性。
-
声明式编程：React使开发者能够以声明的方式描述UI，代码更加简洁易读。
Vue.js用法以及示例
提示：Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架。它的设计目标是易于上手，同时也便于与第三方库或既有项目整合。Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
例如：
- 构建用户界面：Vue.js 专注于 MVVM 模型的 ViewModel 层，它能让数据的展示和交互变得非常简单。
- 组件化开发：通过组件化的方式，可以让页面的每一部分都是独立的、可复用的，让代码更加易于管理和维护。
- 双向数据绑定：Vue.js 实现了数据的双向绑定，当数据发生变化时，视图会自动更新，反之亦然，这使得开发者可以更加专注于业务逻辑。
- 易于学习和使用：Vue.js 的语法简洁，学习成本低，能够快速上手并应用到项目中。
Vue.js 的用法示例：
var vm = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
在 HTML 中，可以这样使用：
<div id="app">
{{ message }}
</div>
使用 Vue 组件：
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
new Vue({
el: '#app'
})
在 HTML 中使用组件：
<div id="app">
<my-component></my-component>
</div>
指令：Vue.js 提供了一系列的指令，如 v-bind、v-model、v-for 等，用于在模板中提供强大的功能。
<div id="app">
<input v-model="message">
<p>The value of the input is: {{ message }}</p>
</div>
计算属性和侦听器：计算属性用于声明式地描述一个数据依赖于其他数据，侦听器用于当需要在数据变化时执行异步或开销较大的操作时。
new Vue({
el: '#app',
data: {
message: 'Hello'
},
computed: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
},
watch: {
message: function (newVal, oldVal) {
console.log('Message changed from', oldVal, 'to', newVal)
}
}
})
通过以上的介绍和示例，可以看出 Vue.js 是一个功能强大且易于使用的 JavaScript 框架，非常适合用于构建现代化的网页和应用程序。
Angular用法以及示例
提示：Angular是一个由Google维护的开源前端Web应用框架，用于构建高性能、动态的单页应用（SPA）。
作用：
- 组件化开发：通过组件构建可重用、模块化的用户界面，提高开发效率和可维护性。
- 数据绑定：支持双向数据绑定，简化数据同步过程。
- 依赖注入：内置依赖注入系统，便于组件间依赖关系的管理。
- 模块化：使用模块组织代码，支持大型应用的开发和维护。
用法上，Angular提供了Angular CLI工具，用于创建项目、生成代码、测试、打包和部署等开发任务。开发者可以使用TypeScript编写组件逻辑，HTML作为模板语言定义组件视图，并通过CSS进行样式化。此外，Angular还支持路由、表单处理、HTTP通信等高级功能，以及跨平台开发能力
当然，以下是一个简单的Angular示例，展示了如何创建一个基本的Angular组件并显示一些数据。
首先，确保你已经安装了Angular CLI。如果还没有安装，可以通过npm安装：
npm install -g @angular/cli
然后，创建一个新的Angular项目：
ng new angular-example
进入项目目录：
cd angular-example
现在，我们将创建一个简单的组件来显示一些文本。使用Angular CLI生成一个新组件：
ng generate component welcome
这将在src/app目录下创建一个名为welcome的新文件夹，其中包含组件的TypeScript文件、HTML模板、CSS样式表和测试文件。
接下来，编辑src/app/welcome/welcome.component.ts文件，添加一些属性：
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-welcome',
templateUrl: './welcome.component.html',
styleUrls: ['./welcome.component.css']
})
export class WelcomeComponent implements OnInit {
message: string = 'Welcome to Angular!';
constructor() { }
ngOnInit(): void {
}
}
然后，编辑src/app/welcome/welcome.component.html文件，显示这个属性：
<p>{{ message }}</p>
最后，我们需要将这个新组件添加到应用中。打开src/app/app.module.ts文件，并在declarations数组中添加WelcomeComponent：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { WelcomeComponent } from './welcome/welcome.component'; // Import the WelcomeComponent
@NgModule({
declarations: [
AppComponent,
WelcomeComponent // Add WelcomeComponent to the declarations array
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
现在，你可以在src/app/app.component.html中使用标签来显示这个组件了：
<app-welcome></app-welcome>
最后，运行Angular应用：
ng serve
打开浏览器并访问http://localhost:4200/，你将看到页面上显示了“Welcome to Angular!”的消息。这就是一个基本的Angular组件示例。
小结（什么时候选择三大主流框架？）
提示：通过上处描述示例，前端框架的选择需综合考虑多个因素，以下是对目前流行的前端框架的对比：
-
React：
优点：组件化、虚拟DOM、强大的生态系统、大量社区支持和资源。
适用场景：复杂的用户界面、单页面应用、有长远维护需求的项目。 -
Vue.js：
优点：易上手、组件化、灵活性、响应式数据绑定。
适用场景：中小型项目、快速原型开发、需要逐步迁移或集成的老项目。 -
Angular：
优点：完整的框架、强类型支持、强大的依赖注入机制。
适用场景：大型企业级应用、需求复杂且需要良好的结构、团队规模较大的项目。
选择框架时，务必考虑项目的具体需求、团队的技术能力及未来维护的便利性。
标签：Vue,app,优缺点,js,React,选型,组件,Angular,三大 From： https://blog.csdn.net/weixin_45836587/article/details/142411156