Vue 概述

一句话 Vue 是尤雨溪（Evan You）创建的渐进式 JavaScript 框架，核心思想是响应式数据绑定 + 模板驱动，上手简单，逐步增强。

一、核心理念

渐进式框架

Vue 的设计哲学是用多少学多少。可以只在页面局部引入 Vue 处理交互，也可以用全家桶搭建大型 SPA。不强制一步到位。

简单页面交互 → 组件化 → 路由（Vue Router） → 状态管理（Pinia） → SSR（Nuxt）

响应式数据绑定

数据变了，视图自动更新；视图变了（表单输入），数据也自动同步。这就是双向绑定，开发者不需要手动同步。

模板优先

Vue 使用 HTML 模板语法，对前端开发者来说几乎零学习成本：

<template>
  <h1>Hello, </h1>
  <button @click="count++">点了 9 次</button>
</template>

二、关键概念

单文件组件（SFC）

Vue 的标志性设计——把模板、逻辑、样式写在一个 .vue 文件里：

<template>
  <h1></h1>
</template>

<script setup>
import { ref } from 'vue'
const msg = ref('Hello Vue!')
</script>

<style scoped>
h1 { color: #42b883; }
</style>

scoped 让样式只作用于当前组件，不会污染其他组件。

两种 API 风格

Options API：

export default {
  data() { return { count: 0 } },
  methods: {
    increment() { this.count++ }
  }
}

Composition API（<script setup>）：

import { ref } from 'vue'
const count = ref(0)
const increment = () => count.value++

响应式原理

常用响应式 API

指令系统

Vue 模板中的特殊属性，以 v- 开头：

三、生态系统

Vite Vite 虽然由 Vue 作者创建，但它是框架无关的，React、Svelte 等都能用。现在已经成为前端构建工具的主流选择。

四、发展脉络

五、Vue vs React 对比

设计哲学

响应式机制

代码风格对比

同样一个计数器：

Vue（<script setup>）：

<template>
  <button @click="count++">9</button>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

React（Hooks）：

import { useState } from 'react'

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

对比 Vue 可以直接 count++，React 必须 setCount()。Vue 模板和逻辑分离，React 用 JSX 混在一起。各有取舍。

性能

生态与社区

怎么选？

Quote 两者都是优秀的工具。Vue 像一把好用的瑞士军刀——开箱即用；React 像一套乐高积木——自由组合。选哪个取决于你的团队、项目和个人偏好。

相关笔记

• React 概述