快捷導(dǎo)航

前端三大主流框架React、Vue、Angular的詳細概述及案例

更新時間：2025年06月17日 11:11:18 作者：m0_54851477

Angular、React和Vue作為三大主流前端框架,各自擁有獨特的特點和優(yōu)勢,為開發(fā)者提供了強大的工具集和靈活的解決方案,這篇文章主要介紹了前端三大主流框架React、Vue、Angular的相關(guān)資料,需要的朋友可以參考下

一、React、Vue、Angular簡介

前端三大主流框架分別是Angular、React和Vue。以下是這三個框架的詳細概述：

Angular：

Angular原名AngularJS，誕生于2009年，由Google開發(fā)并維護。
它是一個完整的框架，提供了數(shù)據(jù)綁定、組件化、路由、依賴注入等功能。
Angular采用了TypeScript作為開發(fā)語言，它是JavaScript的一個超集，提供了靜態(tài)類型檢查和更強大的面向?qū)ο缶幊棠芰Α?/li>
Angular的特點包括功能強大、完整且穩(wěn)定，適用于開發(fā)大型和復(fù)雜的Web應(yīng)用。
它提供了很多內(nèi)置的功能和工具，如模板語法、表單驗證、HTTP模塊等，幫助開發(fā)者更快速地構(gòu)建高質(zhì)量的Web應(yīng)用。
Angular支持移動端開發(fā)，可以使用Ionic等工具將Web應(yīng)用打包成原生應(yīng)用。

React：

React是由Facebook開發(fā)并開源的一個JavaScript庫，正式版推出于2013年。
它專注于構(gòu)建用戶界面，并以其虛擬文檔對象模型（Virtual DOM）和高效的diff算法而聞名。
React的組件化開發(fā)模式允許開發(fā)者將UI和業(yè)務(wù)邏輯分離，提高代碼的復(fù)用性和可維護性。
React對新開發(fā)人員來說較為友好，并提供了JSX語法，這是一種混合HTML和JavaScript的語言，使編寫React組件更加容易和直觀。
React的社區(qū)支持龐大，可以找到大量的文檔、教程和工具來幫助開發(fā)者解決問題。

Vue：

Vue是一個由華人開發(fā)者尤雨溪創(chuàng)造的前端框架，正式推出于2014年。
Vue借鑒了Angular和React的特點，如Virtual DOM、雙向數(shù)據(jù)綁定、diff算法、響應(yīng)式屬性、組件化開發(fā)等，并進行了相關(guān)優(yōu)化，使其使用更加方便和容易上手。
Vue以其簡潔易用和高效的特點而受到開發(fā)者的喜愛，尤其適合初學者。
Vue也支持組件化開發(fā)，允許開發(fā)者將UI和業(yè)務(wù)邏輯分離，提高代碼的可復(fù)用性和可維護性。

二、React初始化案例

React詳細介紹

React是一個用于構(gòu)建用戶界面的JavaScript庫，它起源于Facebook的內(nèi)部項目。React的出現(xiàn)是因為Facebook對市場上所有JavaScript MVC框架都不滿意，決定自行開發(fā)一套，用于架設(shè)Instagram的網(wǎng)站，并于2013年5月開源。React主要用于構(gòu)建UI，可以在React里傳遞多種類型的參數(shù)，如聲明代碼，幫助開發(fā)者渲染出UI，也可以是靜態(tài)的HTML DOM元素，也可以傳遞動態(tài)變量，甚至是可交互的應(yīng)用組件。

React的特點包括：

聲明式設(shè)計：React使創(chuàng)建交互式UI變得輕而易舉。為應(yīng)用的每一個狀態(tài)設(shè)計簡潔的視圖，當數(shù)據(jù)變動時，React能高效更新并渲染合適的組件。
組件化：構(gòu)建管理自身狀態(tài)的封裝組件，然后對其組合以構(gòu)成復(fù)雜的UI。
高效：React通過對DOM的模擬，最大限度地減少與DOM的交互。
靈活：無論使用什么技術(shù)棧，React都可以方便地引入開發(fā)新功能，而無需重寫現(xiàn)有代碼。

React案例代碼

Hello World示例代碼

這是一個簡單的React組件示例，用于顯示“Hello, World!”文本。

import React from 'react';
import ReactDOM from 'react-dom';

class HelloWorld extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

ReactDOM.render(<HelloWorld />, document.getElementById('root'));

這段代碼通過React的ReactDOM.render方法將<HelloWorld />組件渲染到<div id="root"></div>元素中。組件的render方法返回一個包含<h1>標簽的JSX表達式。

State和Props示例代碼

這個示例展示了如何在React組件中使用狀態(tài)和屬性（state and props）。

import React from 'react';
import ReactDOM from 'react-dom';

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.increment()}>Increment</button>
      </div>
    );
  }
}

ReactDOM.render(<Counter />, document.getElementById('root'));

在這個示例中，我們創(chuàng)建了一個名為Counter的React組件。該組件具有一個狀態(tài)count，并通過increment方法增加計數(shù)。在組件的render方法中，我們顯示當前計數(shù)并提供一個按鈕來增加計數(shù)。當用戶點擊按鈕時，會調(diào)用increment方法并更新狀態(tài)，從而觸發(fā)組件的重新渲染并顯示更新后的計數(shù)。

三、Vue初始化案例

Vue.js 詳細介紹

Vue.js 是一款構(gòu)建用戶界面的漸進式框架。與其他大型框架不同的是，Vue 被設(shè)計為可以自底向上逐層應(yīng)用。Vue 的核心庫只關(guān)注視圖層，不僅易于上手，還便于與第三方庫或已有項目整合。另一方面，當與現(xiàn)代化的工具鏈以及各種支持類庫結(jié)合使用時，Vue 也能為復(fù)雜的單頁應(yīng)用（SPA）提供驅(qū)動。

Vue.js 的主要特點包括：

組件化：Vue 允許你以可復(fù)用的方式構(gòu)建大型應(yīng)用。在 Vue 中，一個組件本質(zhì)上是一個擁有預(yù)定義選項的一個 Vue 實例。
響應(yīng)式數(shù)據(jù)綁定：Vue 的核心庫只關(guān)注視圖層，它采用簡潔的模板語法，將 DOM 操作與數(shù)據(jù)操作進行綁定，使得數(shù)據(jù)變化時視圖能夠自動更新。
指令：Vue 提供了一系列內(nèi)建的指令，如 v-if、v-for、v-bind 等，這些指令為模板提供了強大的功能。
計算屬性和偵聽器：Vue 提供了計算屬性和偵聽器，用于處理復(fù)雜邏輯和響應(yīng)數(shù)據(jù)變化。
可定制的過渡和動畫：Vue 在插入、更新或移除 DOM 時，提供多種過渡效果。
路由和狀態(tài)管理：Vue 可以與 Vue Router 和 Vuex 這樣的庫一起使用，以構(gòu)建復(fù)雜的單頁應(yīng)用。
輕量級和靈活性：Vue 相對于其他大型框架（如 Angular 或 React）來說更輕量級，這使得它更加靈活和易于使用。

Vue.js 案例代碼

以下是一個簡單的 Vue.js 示例，它展示了如何使用 Vue 創(chuàng)建一個計數(shù)器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue.js Counter Example</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>

<div id="app">
    <p>{{ message }}</p>
    <button @click="increment">Increment</button>
    <p>Count: {{ count }}</p>
</div>

<script>
new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!',
        count: 0
    },
    methods: {
        increment: function() {
            this.count++;
        }
    }
});
</script>

</body>
</html>

在這個示例中，我們創(chuàng)建了一個新的 Vue 實例，并將其掛載到 id 為 app 的元素上。在 Vue 實例的 data 對象中，我們定義了 message 和 count 兩個響應(yīng)式數(shù)據(jù)屬性。我們還定義了一個名為 increment 的方法，該方法會在每次點擊按鈕時被調(diào)用，并使 count 的值遞增。在模板中，我們使用雙大括號插值來顯示 message 和 count 的值，并使用 @click 指令來監(jiān)聽按鈕的點擊事件。

四、Angular初始化案例

Angular 詳細介紹

Angular 是一個由 Google 開發(fā)和維護的開源前端框架，用于構(gòu)建單頁應(yīng)用（SPA）和跨平臺應(yīng)用。Angular 提供了一個結(jié)構(gòu)化的開發(fā)框架，它整合了多種技術(shù)，包括 TypeScript、HTML、CSS 和其他庫，以簡化應(yīng)用程序的開發(fā)過程。Angular 強調(diào)組件化、模塊化、依賴注入和響應(yīng)式編程等核心概念。

Angular 的主要特點包括：

組件化：Angular 應(yīng)用是由一系列組件組成的，每個組件控制屏幕上的一小塊區(qū)域。組件是 Angular 應(yīng)用的構(gòu)建塊，它們封裝了相關(guān)的 HTML、CSS 和 TypeScript 代碼。
TypeScript 支持：Angular 使用 TypeScript 作為主要開發(fā)語言，它提供了靜態(tài)類型檢查、面向?qū)ο缶幊烫匦院?ES6+ 功能。
雙向數(shù)據(jù)綁定：Angular 提供了強大的數(shù)據(jù)綁定功能，可以自動更新視圖以反映模型中的更改，并在模型更改時自動更新視圖。
依賴注入：Angular 使用依賴注入（DI）來管理組件之間的依賴關(guān)系，使得代碼更易于測試和維護。
路由：Angular 提供了強大的路由功能，允許你定義不同的視圖和它們之間的導(dǎo)航路徑。
表單驗證：Angular 提供了豐富的表單驗證功能，支持模板驅(qū)動表單和響應(yīng)式表單。
指令和管道：Angular 提供了許多內(nèi)建的指令和管道，用于在模板中執(zhí)行復(fù)雜的操作和數(shù)據(jù)轉(zhuǎn)換。
模塊化：Angular 應(yīng)用被組織成模塊，每個模塊包含了一組相關(guān)的組件、服務(wù)和指令。

Angular 案例代碼

以下是一個簡單的 Angular 示例，它展示了如何創(chuàng)建一個計數(shù)器組件：

首先，你需要確保你的項目已經(jīng)通過 Angular CLI 創(chuàng)建并設(shè)置好了。如果你還沒有創(chuàng)建項目，可以使用以下命令創(chuàng)建一個新的 Angular 項目：

ng new my-angular-app
cd my-angular-app

然后，你可以創(chuàng)建一個新的計數(shù)器組件：

ng generate component counter

接下來，編輯 counter 組件的 TypeScript 文件（counter.component.ts）和 HTML 模板文件（counter.component.html）。

counter.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-counter',
  templateUrl: './counter.component.html',
  styleUrls: ['./counter.component.css']
})
export class CounterComponent {
  count = 0;

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}

counter.component.html:

<p>Count: {{ count }}</p>
<button (click)="increment()">Increment</button>
<button (click)="decrement()">Decrement</button>

在 app.module.ts 中，確保你已經(jīng)將 CounterComponent 添加到 declarations 數(shù)組中：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { CounterComponent } from './counter/counter.component';

@NgModule({
  declarations: [
    AppComponent,
    CounterComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

最后，在 app.component.html 中使用 app-counter 選擇器來包含你的計數(shù)器組件：