三大前端框架对比：Angular、Vue、React 有啥本质区别？-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_37609579/article/details/148610367

三个我都用过，直到最近我才彻底想明白它们的本质区别。
如果你也对“为什么 Angular 用模板、React 用 JSX、Vue 两边都能搞”感到困惑，那这篇就是为你写的。

🚩一句话总结

框架	核心思想	写页面的方式
Angular	在 HTML 上编程（指令驱动）	加属性指令控制模板
Vue	模板驱动 + 支持函数式	`<template>` + JS
React	一切用 JS（JSX 驱动）	JS 函数里返回页面结构

1️⃣ Angular：HTML 增强大师

Angular 就像一个“高级 HTML 解释器”，你写的模板就是 HTML，加上 Angular 的指令。

<!-- Angular 写法 -->
<div *ngIf="showMsg" (click)="sayHello()">Hello Angular</div>

*ngIf：控制显示
(click)：事件绑定
[value]、[disabled] 等属性绑定全靠方括号

👉 特点：HTML 是主角，TS 负责逻辑，结构清晰，但学习曲线不低。

2️⃣ Vue：模板为主，JS 也能上

Vue 更像是前端圈的“中间派”，默认鼓励使用模板，但高手也能上 JS 函数式渲染。

<!-- Vue 模板写法 -->
<template>
  <div v-if="showMsg" @click="sayHello">Hello Vue</div>
</template>

<script setup>
import { ref } from 'vue'
const showMsg = ref(true)
const sayHello = () => alert('Hi')
</script>

👉 v-if 和 @click 是 Vue 的指令，跟 Angular 类似，但更轻量。

高级用户还可以这么写（函数式）：

// Vue render 函数写法（像 React）
import { h } from 'vue'

export default {
  render() {
    return this.showMsg ? h('div', { onClick: this.sayHello }, 'Hello Vue') : null
  }
}

3️⃣ React：一切都是 JS

第一次用 React 的时候，我整个人都懵了：**这也叫写页面？**其实它是把 UI 看成函数的返回值。

// React 写法
function App() {
  const [showMsg, setShowMsg] = useState(true)

  return showMsg && (
    <div onClick={() => alert('Hi')}>Hello React</div>
  )
}

JSX 看起来像 HTML，其实是 JS 语法糖。你可以在里面写表达式、逻辑、条件渲染，想写啥就写啥。

👉 React 最大的自由，也是一开始最让人迷惑的地方。