FE-10-Vue 3 进阶：响应式原理、Composition API 与性能

2026-09-22

字数统计: 2.1k字 | 阅读时长≈ 10分

FE-10-Vue 3 进阶：响应式原理、Composition API 与性能

本节目标：深入理解 Vue 3 的响应式系统（Proxy vs defineProperty）、Composition API、生命周期、性能优化。

1. Vue 3 vs Vue 2

特性	Vue 2	Vue 3
响应式实现	`Object.defineProperty`	`Proxy`
API 风格	Options API 为主	Composition API + Options
TypeScript	凑合	一流
包大小	较大	Tree-shakable，按需引入
Fragment	不支持	支持（多根节点）
Teleport	第三方	内置
Suspense	无	内置
性能	一般	1.3-2x 提升

2. 响应式原理：Proxy

2.1 Vue 2 的痛点

// Vue 2 用 Object.defineProperty
Object.defineProperty(obj, 'count', {
  get() { return this._count; },
  set(val) { this._count = val; /* 通知 watcher */ },
});

问题：

不能监听新增/删除属性（要 Vue.set/Vue.delete）
不能监听数组下标（要重写 7 个方法）
初始化时遍历所有属性，大对象慢

2.2 Vue 3 的 Proxy

// Vue 3 用 Proxy
const obj = new Proxy(target, {
  get(target, key, receiver) {
    track(target, key);  // 依赖收集
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    const result = Reflect.set(target, key, value, receiver);
    trigger(target, key);  // 触发更新
    return result;
  },
  deleteProperty(target, key) {
    const result = Reflect.deleteProperty(target, key);
    trigger(target, key);
    return result;
  },
});

优势：

监听新增/删除属性自然支持
数组下标、length 变化都监听
懒代理（访问时才包装）

2.3 依赖收集与派发

render() 被调用
   ↓
访问 obj.count 触发 get
   ↓
track('count', currentEffect)  // 把当前 effect 加到 count 的依赖列表
   ↓
obj.count 变化时
   ↓
trigger('count')  // 重新执行所有依赖 effect

3. Composition API

核心组合式函数：ref、reactive、computed、watch、watchEffect、生命周期钩子。

3.1 ref

import { ref } from 'vue';

// 基本类型
const count = ref(0);
count.value++;          // JS 中
// <div>{{ count }}</div>  // 模板中自动解包

// 对象（推荐用 reactive）
const user = ref({ name: 'Alice', age: 25 });
user.value.name = 'Bob';

// 解构（会失去响应性）
const { name } = user.value;  // ❌ 静态值
// 用 toRefs
const { name } = toRefs(user.value);  // ✅

3.2 reactive

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  user: { name: 'Alice', age: 25 },
});

state.count++;  // 直接修改，触发更新

// 解构
const { count, user } = state;  // ❌ 失去响应性
// 用 toRefs
const { count, user } = toRefs(state);  // ✅

ref vs reactive 选型：

基本类型：ref
对象：reactive（更直观）
混合：都可以，看团队习惯

3.3 computed

import { ref, computed } from 'vue';

const firstName = ref('Alice');
const lastName = ref('Smith');

const fullName = computed(() => `${firstName.value} ${lastName.value}`);
// fullName.value

// 可写 computed
const fullName = computed({
  get: () => `${firstName.value} ${lastName.value}`,
  set: (v) => {
    [firstName.value, lastName.value] = v.split(' ');
  },
});

computed vs methods：

computed：有缓存，依赖不变就不重新算
methods：每次调用都执行

3.4 watch

import { ref, watch } from 'vue';

const count = ref(0);

// 监听 ref
watch(count, (newVal, oldVal) => {
  console.log(`count: ${oldVal} -> ${newVal}`);
});

// 监听多个
watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
  // ...
});

// 监听 reactive 的属性
const state = reactive({ count: 0, name: 'A' });
watch(() => state.count, (newVal) => { /* ... */ });

// 立即执行
watch(source, callback, { immediate: true });

// 深度监听（默认 reactive 自动深度）
watch(state, (newVal) => { /* ... */ }, { deep: true });

3.5 watchEffect

自动收集依赖：

import { watchEffect } from 'vue';

const count = ref(0);
const name = ref('A');

// 自动追踪 count 和 name
watchEffect(() => {
  console.log(`${name.value}: ${count.value}`);
});
// 立即执行一次 + count/name 变化时执行

watch vs watchEffect：

watch：显式指定依赖
watchEffect：自动收集

3.6 生命周期

import { onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUnmount } from 'vue';

onMounted(() => {
  console.log('mounted');
  // 访问 DOM
  document.querySelector('.el');
});

onUnmounted(() => {
  console.log('unmounted');
});

Vue 3 生命周期对照：

Vue 2	Vue 3
beforeCreate	（无，setup 是替代）
created	（无，setup 是替代）
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted
errorCaptured	onErrorCaptured

Composition API 用 onXxx 注册，必须在 setup 同步执行。

4. 组件通信

4.1 Props / Emits

// 父
const count = ref(0);
<Child :count="count" @update="handleUpdate" />

// 子
const props = defineProps<{ count: number }>();
const emit = defineEmits<{
  (e: 'update', value: number): void;
}>();

emit('update', props.count + 1);

4.2 Provide / Inject

跨层级传值（替代 Event Bus）：

// 祖先
import { provide, ref } from 'vue';

const theme = ref('dark');
provide('theme', theme);

// 后代
import { inject } from 'vue';

const theme = inject<Ref<string>>('theme', ref('light'));

最佳实践：用 Symbol 作 key 避免冲突 + provide 类型

1
2
3

// keys.ts
import type { InjectionKey, Ref } from 'vue';
export const ThemeKey: InjectionKey<Ref<string>> = Symbol('theme');

4.3 v-model 升级

Vue 3 的 v-model 拆解：

<!-- 父 -->
<CustomInput v-model="search" />

<!-- 等价于 -->
<CustomInput
  :modelValue="search"
  @update:modelValue="search = $event"
/>

<!-- 子（Vue 3 风格） -->
<script setup>
defineProps<{ modelValue: string }>();
const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void;
}>();
</script>
<template>
  <input
    :value="modelValue"
    @input="emit('update:modelValue', $event.target.value)"
  />
</template>

多 v-model：

1	<Form v-model:title="title" v-model:body="body" />

5. 性能优化

5.1 v-memo（Vue 3.2+）

模板片段记忆化：

<div v-for="item in list" :key="item.id" v-memo="[item.id, item.selected]">
  <!-- 只有 item.id 或 item.selected 变化时才重新渲染 -->
  {{ item.name }}
</div>

5.2 shallowRef / shallowReactive

只对顶层响应，深层不包装：

import { shallowRef, shallowReactive } from 'vue';

const bigList = shallowRef([...]);  // 数组本身响应，元素变化不触发
// 适用于大对象、外部库实例

5.3 markRaw

标记对象永远不响应：

import { reactive, markRaw } from 'vue';

class BigLibrary {
  // 很多方法、字段
}

const instance = new BigLibrary();
const state = reactive({
  lib: markRaw(instance),  // 不代理这个，性能大幅提升
});

5.4 组件定义

// 同步引入（默认）
import MyComponent from './MyComponent.vue';

// 异步（路由级 code split）
const Admin = defineAsyncComponent(() => import('./Admin.vue'));

5.5 列表渲染

<!-- ✓ 稳定的 key -->
<div v-for="item in items" :key="item.id">{{ item.name }}</div>

<!-- ✗ index 会在增删时错位 -->
<div v-for="(item, i) in items" :key="i">{{ item.name }}</div>

5.6 computed 缓存

// ✓ 缓存：依赖不变不重算
const filtered = computed(() => list.filter(x => x.active));

// ✗ 每次 render 都重算
const filtered = list.filter(x => x.active);  // 在模板里

6. Suspense（异步组件）

<template>
  <Suspense>
    <template #default>
      <AsyncUserProfile />
    </template>
    <template #fallback>
      <Loading />
    </template>
  </Suspense>
</template>

<script setup>
const AsyncUserProfile = defineAsyncComponent(() => import('./UserProfile.vue'));
</script>

配合 async setup：

// UserProfile.vue
<script setup>
const user = await fetchUser(props.id);  // 顶层 await
</script>

7. Teleport（传送门）

把组件渲染到 DOM 任意位置：

<template>
  <button @click="show = true">Open Modal</button>

  <Teleport to="body">
    <Modal v-if="show" @close="show = false" />
  </Teleport>
</template>

用途：Modal、Toast、Tooltip 等浮层。

8. 自定义指令

// v-focus
app.directive('focus', {
  mounted(el) { el.focus(); },
});

// 局部
<script setup>
const vFocus = {
  mounted(el) { el.focus(); },
};
</script>

<template>
  <input v-focus />
</template>

9. 状态管理 Pinia

1	npm install pinia

// stores/user.ts
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';

export const useUserStore = defineStore('user', () => {
  const name = ref('Alice');
  const age = ref(25);
  const isAdult = computed(() => age.value >= 18);

  function setName(n: string) {
    name.value = n;
  }

  return { name, age, isAdult, setName };
});

// 组件中使用
import { useUserStore } from '@/stores/user';
const user = useUserStore();

user.setName('Bob');
console.log(user.isAdult);

10. 服务端渲染（Nuxt 3）

1	npx nuxi@latest init my-nuxt-app

<!-- pages/index.vue -->
<script setup>
const { data } = await useFetch('/api/user');
</script>
<template>
  <h1>{{ data?.name }}</h1>
</template>

Nuxt 3 优势：

默认 SSR
文件路由
自动 import
集成 server（server/api/）

11. Vue 3 生态推荐（2026）

类别	推荐
全栈框架	Nuxt 3
状态管理	Pinia（官方）
UI 组件	Element Plus、Naive UI、Vuetify
表单	VeeValidate 4 + Yup/Zod
路由	Vue Router 4（默认）
测试	Vitest + Vue Test Utils
构建	Vite（默认）
静态站点	VitePress / Nuxt Content

小结

概念	关键点
响应式	Proxy + 依赖收集（effect）
Composition	ref/reactive/computed/watch
生命周期	onXxx 钩子，setup 同步注册
性能	v-memo、shallowRef、markRaw
全栈	Nuxt 3（首选）
状态	Pinia（替代 Vuex）

Vue 3 选型建议：

已有 Vue 2 项目：升级到 Vue 3（Composition API 兼容层）
新项目：Vue 3 + Vite + Pinia + Element Plus
全栈：Nuxt 3
文档站：VitePress

下一节讲状态管理：Redux / Zustand / Pinia / MobX 对比。

本文作者： CoderSong
本文链接： https://jack-song-gif.github.io/2026/09/22/FE-10-Vue3进阶：响应式与Composition/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！