一、Vue 简介

Vue 由前 Google 工程师尤雨溪 (Evan You) 创建，2014 年首发。核心理念：

  • 渐进式：可以只用一部分（CDN 引入做轻量交互），也可以全套（路由 + 状态 + SSR）
  • 模板语法 + 响应式：HTML 写界面，数据变了视图自动变
  • 学习曲线平：会 HTML/CSS/JS 就能上手
版本现状
Vue 22024 年 EOL，仅维护性更新
Vue 3当前推荐，性能更好、TS 支持完善、Composition API

二、Hello Vue

最简形式（CDN）：

1
2
3
4
5
6
7
8
9
10
<script src="https://unpkg.com/vue@3"></script>
<div id="app">{{ msg }}</div>
<script>
const { createApp } = Vue;
createApp({
  data() {
    return { msg: 'Hello Vue 3' };
  }
}).mount('#app');
</script>

工程化（推荐）：

1
2
npm create vue@latest      # 官方脚手架（基于 Vite）
cd my-app && npm i && npm run dev

三、单文件组件（SFC）+ <script setup>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';

const count = ref(0);
const double = computed(() => count.value * 2);

function inc() {
  count.value++;
}

onMounted(() => console.log('mounted'));
</script>

<template>
  <div>
    <p>{{ count }} × 2 = {{ double }}</p>
    <button @click="inc">+1</button>
  </div>
</template>

<style scoped>
button { padding: 4px 12px; }
</style>

<script setup> 是 Vue 3 的灵魂语法糖 —— 顶层变量自动暴露给模板，比 Options API 简洁太多。

四、响应式核心

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { ref, reactive, computed, watch } from 'vue';

// ref：包装原始值
const n = ref(1);
n.value++;                  // 注意 .value

// reactive：包装对象（不能用于原始值）
const state = reactive({ count: 0, items: [] });
state.count++;              // 直接改

// computed：缓存衍生值
const total = computed(() => state.items.reduce((s, i) => s + i.price, 0));

// watch：副作用
watch(n, (newVal, oldVal) => console.log(`n: ${oldVal} → ${newVal}`));

// watchEffect：自动追踪依赖
watchEffect(() => console.log('count:', state.count));

Vue 3.5+ 的 reactive props 解构 可以直接 const { count } = defineProps() 不丢响应性，3.5 之前要 toRefs。

五、组件通信

1
2
3
4
5
6
7
8
9
<!-- 父 -->
<Child :msg="hi" @done="onDone" />

<!-- 子 -->
<script setup>
const props = defineProps<{ msg: string }>();
const emit = defineEmits<{ done: [result: number] }>();
emit('done', 42);
</script>

跨层级用 provide/inject；全局状态用 Pinia（取代了 Vuex）。

六、生态全家桶

类型推荐
构建Vite（官方，秒级热更新）
路由Vue Router 4
状态Pinia（取代 Vuex）
SSR / 全栈Nuxt 3
UI 库Element Plus、Ant Design Vue、Naive UI、Vuetify 3、PrimeVue
测试Vitest + Vue Test Utils
TS 支持Volar（VSCode 插件，已被 Vue Official 取代）

七、踩坑笔记

坑现象解法
忘记 .value模板里能用，JS 里 n 不变ref 在 JS 里必须 n.value，模板自动解包
解构丢响应性const { count } = state 后改没反应用 toRefs(state) 或 storeToRefs(usePiniaStore())
v-for + key渲染异常、组件状态错乱永远给 key，且用唯一 ID（不是 index）
v-if vs v-show频繁切换闪烁/性能差频繁切用 v-show（CSS），偶尔用 v-if（DOM 增删）
scoped 样式不生效子组件根元素没样式scoped 只影响当前组件；跨组件用 :deep(.x)
响应性丢失直接给 ref 赋对象，修改不更新用 reactive 或 ref 包装新对象，避免直接替换 .value

八、Vue vs React 该选哪个

维度VueReact
上手平中
模板HTML 模板JSX
状态管理Pinia（简洁）Redux / Zustand / Jotai 多选
TS 体验3.x 后追平一直很好
生态官方维护多第三方百花齐放
社区国内大全球更大

短结论：国内项目、新手团队、想快速产出 → Vue；大型应用、跨平台、海外团队 → React。

参考