Angular vs React vs Vue vs Stencil: 渲染机制、架构与场景深度对比

这四个工具代表了前端开发的四种不同思路。@angular/core 是全能型框架，react 是灵活库，vue 是渐进式框架，而 @stencil/core 是组件编译器。它们解决的问题域有重叠，但核心定位不同。让我们从工程师视角深入对比。

🚀 渲染机制：信号、虚拟 DOM 与代理

@angular/core 最近引入了 Signals 机制，不再完全依赖 Zone.js。

• 使用 signal 创建响应式状态。
• 模板通过 {{ }} 插值或新控制流语法更新。

// angular: 使用 Signals
import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-counter',
  template: `<button (click)=\"count.update(v => v + 1)\">{{ count() }}</button>`
})
export class Counter {
  count = signal(0);
}

react 基于虚拟 DOM 和 Fiber 架构。

• 状态更新触发重新渲染函数。
• 使用 useState 钩子管理状态。

// react: 使用 Hooks
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

vue 基于代理（Proxy）的响应式系统。

• 自动追踪依赖，精确更新视图。
• 使用 ref 或 reactive 定义状态。

<!-- vue: 使用 Composition API -->
<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>
<template>
  <button @click=\"count++\">{{ count }}</button>
</template>

@stencil/core 编译为原生 Web Components。

• 使用虚拟 DOM 内部渲染，但输出是标准 DOM。
• 使用 @State 装饰器监听变化。

// stencil: 使用装饰器
import { Component, State, h } from '@stencil/core';

@Component({ tag: 'my-counter' })
export class MyCounter {
  @State() count = 0;
  render() {
    return <button onClick={() => this.count++}>{this.count}</button>;
  }
}

🏗️ 组件结构：类、函数与单文件组件

@angular/core 强制使用 TypeScript 类。

• 通过装饰器 @Component 定义元数据。
• 逻辑与模板分离，适合大型项目结构。

// angular: 类组件
@Component({
  selector: 'app-user',
  template: `<div>{{ user.name }}</div>`
})
export class UserComponent {
  user = { name: 'Alice' };
}

react 推荐使用函数组件。

• 逻辑通过 Hooks 组合。
• JSX 直接写在 JavaScript 中。

// react: 函数组件
function User() {
  const user = { name: 'Alice' };
  return <div>{user.name}</div>;
}

vue 支持单文件组件（SFC）。

• <template>、<script>、<style> 放在一个文件中。
• 结构清晰，适合视觉开发。

<!-- vue: 单文件组件 -->
<template>
  <div>{{ user.name }}</div>
</template>
<script setup>
const user = { name: 'Alice' };
</script>

@stencil/core 使用 TypeScript 类与 JSX。

• 类似 Angular 的装饰器风格。
• 编译后输出原生 Custom Elements。

// stencil: 类组件
@Component({ tag: 'my-user' })
export class MyUser {
  user = { name: 'Alice' };
  render() {
    return <div>{this.user.name}</div>;
  }
}

🎨 样式封装：Shadow DOM 与 scoped CSS

@angular/core 提供多种封装模式。

• 支持 ViewEncapsulation.ShadowDom 或 Emulated。
• 样式默认只影响当前组件。

// angular: 样式封装
@Component({
  styles: [`button { color: red; }`],
  encapsulation: ViewEncapsulation.ShadowDom
})

react 本身不提供样式封装。

• 依赖 CSS Modules、CSS-in-JS 或 Utility 类。
• 需要额外配置实现隔离。

// react: 依赖外部方案
import styles from './Button.module.css';
function Button() {
  return <button className={styles.btn}>Click</button>;
}

vue 内置 scoped 样式支持。

• 在 <style> 标签添加 scoped 属性。
• 自动添加属性选择器实现隔离。

<!-- vue: scoped 样式 -->
<style scoped>
button { color: red; }
</style>

@stencil/core 默认使用 Shadow DOM。

• 样式完全隔离，不影响外部。
• 适合构建独立组件库。

// stencil: 默认 Shadow DOM
@Component({
  tag: 'my-btn',
  styleUrl: 'button.css',
  shadow: true
})

🌐 生态定位：应用框架 vs 组件编译器

这是选择时最关键的区别。

• @angular/core、react、vue 用于构建完整的应用程序。

  • 它们管理路由、状态、生命周期和渲染。
  • 适合直接开发用户最终使用的网站或后台。

• @stencil/core 用于构建组件库。

  • 它生成的组件可以在 Angular、React 或 Vue 中使用。
  • 适合团队需要统一 UI 规范且技术栈混合的场景。

📊 核心特性对比表

💡 最终建议

@angular/core 适合大型企业项目 —— 需要严格规范、完整工具链和长期维护保障的场景。如果你不想自己挑选路由或 HTTP 库，选它。

react 适合高度定制化项目 —— 需要灵活架构、复杂交互或跨平台（如 React Native）的场景。如果你想要最大的社区支持和自由度，选它。

vue 适合快速开发与平衡型项目 —— 希望上手快、文档友好且功能足够的场景。如果你需要在开发效率和性能之间找平衡，选它。

@stencil/core 适合设计系统团队 —— 需要构建一套组件供多个不同技术栈的项目复用。如果你不是开发应用，而是开发组件库，选它。

总结：不要混用定位。如果是做应用，在前三者中选；如果是做组件库供他人使用，考虑 Stencil。