120 lines
5.7 KiB
Markdown
120 lines
5.7 KiB
Markdown
---
|
||
id: frontend.vue.reactivity-composition
|
||
title: Vue 3 响应式原理、组合式函数、Pinia 和性能优化
|
||
type: lesson
|
||
domain: frontend
|
||
stack: [vue]
|
||
tags: [Vue 3, 响应式, Proxy, ref, reactive, computed, watch, 组合式函数, Pinia, 性能]
|
||
level: intermediate
|
||
prerequisites: [frontend.typescript.type-system]
|
||
est_hours: 3
|
||
related: [frontend.vue.scenario.ai-chat-stream, frontend.react.index, frontend.vue.interview]
|
||
week: [7]
|
||
order: 1
|
||
---
|
||
|
||
# Vue 3 响应式原理、组合式函数、Pinia 和性能优化
|
||
|
||
> 基于 Vue 3.5 编写，以官方文档为准：https://cn.vuejs.org/
|
||
|
||
## 解释说明
|
||
|
||
### 响应式原理（面试必问）
|
||
|
||
- `reactive()` 用 **Proxy** 拦截对象的读写：读取时**收集依赖**（当前正在运行的副作用：组件渲染、`computed`、`watch`），写入时**触发**依赖重新执行。
|
||
- `ref()` 用对象的 `.value` getter / setter 实现，可以包装基本类型；模板中自动解包。
|
||
- `computed` 是带缓存的副作用：依赖不变就不重新计算。
|
||
- 更新是**异步批量**的：同一轮中多次修改只触发一次渲染，`await nextTick()` 之后才能拿到更新后的 DOM。
|
||
- Vue 2 用 `Object.defineProperty`，无法检测新增属性和数组索引赋值；Vue 3 的 Proxy 解决了这个问题。
|
||
|
||
| API | 用途 | 注意 |
|
||
| --- | --- | --- |
|
||
| `ref` / `reactive` | 响应式状态 | `reactive` 解构会丢失响应性，用 `toRefs`；整体替换 `reactive` 对象会断开引用 |
|
||
| `shallowRef` | 只追踪 `.value` 的替换 | 大对象、第三方实例、只整体替换的数据，性能更好 |
|
||
| `computed` | 派生状态 | 不要在里面做副作用 |
|
||
| `watch` / `watchEffect` | 副作用（请求、存储） | 异步副作用要处理竞态（`onWatcherCleanup` / `onCleanup`） |
|
||
| `effectScope` / `onScopeDispose` | 管理一组副作用的生命周期 | 组合式函数里清理定时器、请求、订阅 |
|
||
|
||
### 组合式函数（Composables）
|
||
|
||
把有状态的逻辑封装成 `useXxx()`：内部用 `ref`、`watch`、生命周期钩子，返回响应式状态和方法。和 React Hooks 的区别：`setup` 只执行一次，没有“依赖数组”和闭包陈旧值的问题，但要注意返回值的响应性和副作用清理。
|
||
|
||
### Pinia
|
||
|
||
官方状态管理：`defineStore`，支持组合式写法；store 解构要用 `storeToRefs`；服务端渲染时每个请求要有独立的 Pinia 实例，避免跨请求状态污染。
|
||
|
||
### 性能
|
||
|
||
`v-memo`、`v-once`；长列表虚拟滚动；大对象用 `shallowRef` / `markRaw`；组件懒加载 `defineAsyncComponent`；`computed` 代替模板中的复杂表达式；避免在模板中创建新对象 / 函数导致子组件重复渲染。
|
||
|
||
## 案例
|
||
|
||
AI 对话页面：流式输出时每秒几十次追加文本，最初用 `reactive` 存整个消息数组并且每次替换，导致长对话卡顿。改为：已完成的消息用 `shallowRef` 数组（完成后整体替换一次），正在生成的消息单独用一个 `ref` 追加文本；Markdown 渲染做节流。把请求、解析、状态机封装成 `useChatStream` 组合式函数，组件卸载时自动停止生成。
|
||
|
||
## 代码示例
|
||
|
||
组合式函数的核心（完整版本 [examples/ai-chat-stream/useChatStream.ts](examples/ai-chat-stream/useChatStream.ts)，带 vitest 测试）：
|
||
|
||
```ts
|
||
export function useChatStream(opts: ChatOptions) {
|
||
const status = ref<ChatStatus>("idle");
|
||
const text = ref("");
|
||
const final = shallowRef<FinalPayload | null>(null); // 整体替换的对象用 shallowRef
|
||
let controller: AbortController | null = null;
|
||
|
||
async function send(question: string) {
|
||
controller?.abort(); // 新问题：取消上一次
|
||
controller = new AbortController();
|
||
status.value = "connecting";
|
||
const resp = await fetch(opts.url, { method: "POST", body: JSON.stringify({ question }), signal: controller.signal });
|
||
status.value = "streaming";
|
||
const feed = createSSEParser((e) => {
|
||
if (e.event === "token") text.value += e.data;
|
||
else if (e.event === "final") final.value = parseFinal(e.data);
|
||
});
|
||
const reader = resp.body!.pipeThrough(new TextDecoderStream()).getReader();
|
||
for (;;) {
|
||
const { value, done } = await reader.read();
|
||
if (done) break;
|
||
feed(value);
|
||
}
|
||
status.value = "done";
|
||
}
|
||
|
||
onScopeDispose(() => controller?.abort()); // 组件卸载时停止，避免泄漏
|
||
return { status: readonly(status), text: readonly(text), final, send, stop: () => controller?.abort() };
|
||
}
|
||
```
|
||
|
||
在组件中使用：
|
||
|
||
```vue
|
||
<script setup lang="ts">
|
||
import { useChatStream } from "./useChatStream";
|
||
const { status, text, final, send, stop } = useChatStream({ url: "/api/chat" });
|
||
</script>
|
||
|
||
<template>
|
||
<p v-if="status === 'connecting'">连接中…</p>
|
||
<article>{{ text }}</article>
|
||
<ul v-if="final"><li v-for="c in final.citations" :key="c.id">{{ c.title }}</li></ul>
|
||
<button v-if="status === 'streaming'" @click="stop">停止生成</button>
|
||
</template>
|
||
```
|
||
|
||
## 易错点
|
||
|
||
- 解构 `reactive` 对象或 Pinia store 后丢失响应性。
|
||
- `watch` 一个 `reactive` 对象的属性时写成 `watch(obj.count, ...)`：应该传 getter `() => obj.count`。
|
||
- 异步 `watch` 没有处理竞态：快速切换时旧请求的结果覆盖新结果。
|
||
- 在组合式函数里注册了定时器 / 订阅，没有在作用域销毁时清理。
|
||
- 用 `v-html` 渲染模型输出的 Markdown，没有做 XSS 清洗（见 [Web 安全专题](../../cs/web-security/index.md)）。
|
||
- 把大量第三方对象（图表实例、编辑器）放进 `reactive`，造成深度代理的性能开销。
|
||
|
||
## 面试常问
|
||
|
||
- Vue 3 的响应式原理？和 Vue 2 有什么区别？
|
||
- `ref` 和 `reactive` 的区别？
|
||
- `computed` 和 `watch` 的区别？
|
||
- 组合式函数和 React Hooks 有什么区别？
|