Angular React Vue 比较 – 组件篇

Angular、React、Vue 都遵循组件开发标准，组件是构建用户界面（UI）的基础。

三大框架允许我们将 HTML 标签、CSS 和 JavaScript 组合成自定义组件，即 应用程序中可复用的 UI 元素。

组件篇的系列文章我们将比较三大框架组件中的 JavaScript 部分，HTML 标签和 CSS会在模板篇中进行比较。

Angular 中组件的定义与使用

在 Angular 中，组件有以下几部分组成：

• 一个 HTML 模板，用于声明页面要渲染的内容
• 一个用于定义行为的 TypeScript 类
• 一个 CSS 选择器，用于定义组件在模板中的使用方式
• （可选）要应用在模板上的 CSS 样式

定义

在 Angular 中定义一个 HelloWorldComponent 组件的代码示例如下：

hello-world.component.ts 文件

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

@Component({
  // CSS 选择器
  selector: 'app-hello-world',
  template: `
    <p>Hello, world!</p>
  `
})
export class HelloWorldComponent {
  // JavaScript 逻辑代码可以写在这里
}

使用

在 Angular 在使用 HelloWorldComponent 组件示例如下：

app.module.ts 文件

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HelloWorldComponent } from './hello-world.component';

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

app.component.ts 文件

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

@Component({
  selector: 'app-root',
  template: `
    <app-hello-world></app-hello-world>
  `
})
export class AppComponent {}

React 中组件的定义与使用

在 React 中，组件是一段可以使用标签进行扩展 的 JavaScript 函数。

定义

在 React 中定义一个 HelloWorld 组件的代码示例如下：

HelloWorld.js 文件

export default function HelloWorld() {
  // JavaScript 逻辑代码可以写在这里

  return (
    <p>Hello, World!</p>
  )
}

使用

在 React 中使用 HelloWorld 组件示例如下：

App.js 文件

import HelloWorld from './HelloWorld.js';

export default function App() {
  return (
    <HelloWorld />
  );
}

Vue 中组件的定义与使用

在 Vue 中使用构建步骤时，我们一般会将 Vue 组件定义在一个单独的 .vue 文件中，这被叫做单文件组件 (简称 SFC)。

定义

在 Vue 中定义一个 HelloWorld 组件的代码示例如下

HelloWorld.vue 文件

<script setup>
// JavaScript 逻辑代码可以写在这里
</script>

<template>
  <p>Hello, world!</p>
</template>

使用

在 Vue 中使用 HelloWorld 组件示例如下：

App.vue 文件

<script setup>
import HelloWorld from './HelloWorld.vue'
</script>

<template>
  <HelloWorld />
</template>

小结

在三大框架中，组件是为了在应用程序中可复用 UI 元素。无论使用哪个框架，组件化的开发才是当今前端开发的核心思想。

在接下来的章节中，我们将对组件的七个主题进行比较，它们分别是：

• 组件的生命周期
• Props
• Slots
• 组件中的事件
• 动态组件
• 异步组件
• 内置组件

文章参考链接：

• https://angular.cn/guide/component-overview
• 你的第一个组件 – React 中文文档
• 组件基础 | Vue.js