★

Rappa 技术笔记

Rappa 记录后端、前端与 Python 的实践思考。
关注工程质量、性能优化和可维护的代码。

scroll ↓

技 术 笔 记
# .NET 2026 · 卷之一
# Java 2026 · 卷之二
# Vue3 2026 · 卷之三
# Python 2026 · 卷之四
``` 实战场景：**大型表格数据源**。每次后端推全量数据，`massiveObj.value = newData` 走引用替换，不触发深层 diff；而做局部编辑时手动 `triggerRef` 控制渲染时机。配合 `computed` 做到 **精准更新**。 --- ### 2. effectScope —— 组合式函数的生命周期管理 这是最被低估的 API。没有它，composable 的开销无法回收： ```typescript import { effectScope, onScopeDispose, ref } from 'vue' export function usePolling(url: string, interval = 5000) { const data = ref(null) const error = ref(null) // 创建独立作用域 const scope = effectScope() scope.run(() => { const timer = setInterval(async () => { try { data.value = await fetch(url).then(r => r.json()) } catch (e) { error.value = e } }, interval) // 作用域销毁时自动清除 onScopeDispose(() => clearInterval(timer)) }) const stop = () => scope.stop() return { data, error, stop } } ``` 在组件里调用 `usePolling`，组件卸载时 effect 自动释放。**不需要手动 `onUnmounted` + `clearInterval`**，scope.stop() 一次性回收所有副作用。 --- ### 3. composable 设计实践：职责单一原则 写 composable 最容易犯的错：**把所有逻辑塞进一个函数**。 ```typescript // 反例：职责不清晰、包含过多状态的 composable（避免） export function useUserProfile(userId) { const user = ref(null) const posts = ref([]) const friends = ref([]) // ... 40行后还有更多 } // 拆成独立 composable，组合调用 export function useUser(userId) { /* 只处理用户基础信息 */ } export function useUserPosts(userId) { /* 只处理帖子 */ } export function useUserFriends(userId) { /* 只处理好友 */ } // 在组件里组合 const { user } = useUser(id) const { posts } = useUserPosts(id) const { friends } = useUserFriends(id) ``` **每个 composable 只做一件事**。测试时单独测，重构时单独改，复用时也不会带上无关状态。这是 Composition API 的核心价值。
关 于 我
★

Rappa · 技术记录

关注后端、前端、Python 与工程实践。
偏好清晰的架构、可维护的代码和可验证的技术方案。

Net / Java / Vue3 / Python — 持续学习与实践