Vue 与 RxJS 集成：安全管理 subscriptions 的工程实践

1. 为什么在 Vue 项目里硬塞 RxJS 不是“加功能”，而是“动筋骨”

我第一次在 Vue 2 项目里尝试 vue-rx 的时候，以为只是装个插件、写几行 this.$subscribeTo(...) 就能搞定响应式流——结果上线后内存泄漏像开了闸，组件销毁了但 Observable 还在后台疯狂 emit 数据，DevTools 里 subscriptions 列表越滚越长，CPU 占用直接飙到 80%。后来翻源码才发现： vue-rx 的本质不是“让 Vue 支持 RxJS”，而是 在 Vue 的生命周期钩子和响应式系统之间，强行架起一座需要手动维护的桥 。这座桥不稳，数据流就脱轨。

这和 React 的 useObservable 或 Svelte 的 $: 有根本区别。Vue 的响应式核心是基于 Object.defineProperty （Vue 2）或 Proxy （Vue 3），它监听的是 属性值的变化 ；而 RxJS 的 Observable 是一个 推模型（push model）的数据管道 ，它不关心你有没有在用，只管按自己的节奏发数据。两者底层哲学冲突：一个是“你改了我才通知”，一个是“我准备好就立刻推给你”。强行融合，不处理好订阅生命周期，就是给应用埋定时炸弹。

关键词里反复出现的 subscriptions ，绝不是个可有可无的名词——它是整个集成方案的命门。Vue 官方文档里明确写着：“ 所有手动创建的 subscription 必须在组件销毁前显式取消 ”。但 vue-rx 的 this.$subscribeTo 只负责在 beforeDestroy （Vue 2）或 unmounted （Vue 3）时帮你调一次 unsubscribe() ，它 完全不管你在 setup() 里用 fromEvent 监听的滚动事件、用 interval 做的轮询、或者用 ajax 发的请求 。这些全是你自己 new 出来的 Subscription，Vue 不认识， vue-rx 也不管。

所以，“Integrating RxJS with Vue.js” 这个标题背后的真实命题是： 如何在 Vue 的声明式生命周期约束下，安全、可控、可追溯地管理命令式的 RxJS 订阅流？ 它不是技术炫技，而是工程落地的生存问题。适合谁？不是刚学 ref() 的新手，而是已经用过 watch 和 computed 、遇到复杂异步状态编排瓶颈（比如搜索建议+防抖+取消上一次请求+加载态+错误重试）的中高级前端。如果你的场景还停留在“点击按钮弹个 alert”，RxJS 不是解药，是毒药。

2. vue-rx 的真实能力边界：它能做什么，又坚决不能碰什么

vue-rx 是 Vue 官方团队在 Vue 2 时代推出的实验性插件，它的设计目标非常清晰： 为 Vue 实例提供一套与 Vue 生命周期深度绑定的 Observable 消费语法糖，仅此而已 。它不是 RxJS 的 Vue 封装，更不是替代 watch / computed 的通用方案。很多人踩坑，恰恰是因为把它当成了“Vue 版 RxJS 全家桶”。

2.1 它能稳稳接住的三类场景

第一类： 将 Observable 映射为 Vue 实例的响应式属性（data） 。这是 vue-rx 最成熟、最无风险的用法。例如：

// Vue 2 Options API
export default {
  mixins: [vueRx],
  data() {
    return {
      // 这个 user$ 是 Observable，但 vue-rx 会自动将其值同步到 this.user
      user$: of({ name: 'Alice', age: 30 })
    }
  },
  // vue-rx 自动把 user$.pipe(map(u => u.name)) 的结果赋给 this.userName
  subscriptions() {
    return {
      userName: this.user$.pipe(map(u => u.name)),
      userAge: this.user$.pipe(map(u => u.age))
    }
  }
}

这里的关键在于： subscriptions 返回的对象，其 key（如 userName ）会成为 Vue 实例的响应式属性，value 必须是 Observable。 vue-rx 内部会在 created 钩子订阅，在 beforeDestroy 取消，全程托管。这种用法安全，因为数据流终点是 Vue 的 data，受 Vue 响应式系统保护。

第二类： 在 Vue 实例方法中触发 Observable 执行，并将结果注入 data 。典型如按钮点击触发 HTTP 请求：

methods: {
  async loadUser() {
    // 注意：这里用 fromPromise 而非 ajax，因为 vue-rx 对 Promise 更友好
    const user$ = fromPromise(fetch('/api/user').then(r => r.json()))
    // $subscribeTo 是 vue-rx 提供的实例方法
    this.$subscribeTo(user$, {
      next: user => this.userData = user,
      error: err => this.error = err.message
    })
  }
}

$subscribeTo 的优势在于：它返回的 subscription 会被 vue-rx 自动收集，并在组件销毁时统一取消。你不用自己存 this._sub = ... ，再在 beforeDestroy 里手动 this._sub.unsubscribe() 。

第三类： 将 DOM 事件转换为 Observable 并在组件内消费 。 vue-rx 内置了 fromEvent 的便捷封装：

// 在 mounted 钩子中
mounted() {
  // 监听窗口滚动，但只在组件存活时生效
  this.$subscribeTo(
    fromEvent(window, 'scroll').pipe(
      throttleTime(100),
      map(e => window.scrollY)
    ),
    scrollY => this.scrollTop = scrollY
  )
}

vue-rx 确保这个 fromEvent 的 subscription 在 beforeDestroy 时被清理，避免全局事件监听器残留。

2.2 它坚决不能碰的三个雷区

雷区一：在 data 或 computed 中直接返回 Observable 实例
错误示范：

data() {
  return {
    // ❌ 危险！user$ 是 Observable，但 Vue 无法响应式追踪 Observable 对象本身
    user$: of({ name: 'Alice' })
  }
},
computed: {
  // ❌ 更危险！computed 期望返回值，不是 Observable
  userName() {
    return this.user$.pipe(map(u => u.name)) // 返回的是 Observable，不是字符串
  }
}

后果： user$ 在模板中 {{ user$ | async }} 能工作（因为 Vue 的 async 过滤器内部做了订阅），但 userName 计算属性永远返回 Observable 对象，模板里显示 [object Object] ，且无法触发更新。

雷区二：在 setup() （Vue 3 Composition API）中滥用 vue-rx
vue-rx 是为 Vue 2 Options API 设计的。虽然 Vue 3 兼容 Options API，但 vue-rx 没有为 setup() 提供任何官方支持 。试图在 setup() 里调用 this.$subscribeTo 会报错，因为 this 在 setup() 中不可用。社区有人魔改，但稳定性极差。Vue 3 的正确姿势是用 @vueuse/rxjs 或手写 onBeforeUnmount 清理。

雷区三：用 vue-rx 管理跨组件或全局状态流
vue-rx 的订阅管理严格绑定到单个 Vue 实例。如果你有一个全局的 auth$ Observable，想在多个组件中消费， vue-rx 会让你为每个组件都创建一份独立订阅，导致同一份数据被多次拉取、多次处理。这违背了 RxJS “共享执行”的核心原则（ shareReplay(1) ）。此时应该用 Pinia store + computed 包裹 toRef(store, 'auth$') ，或用独立的 RxJS Subject 管理。

提示： vue-rx 的 GitHub 仓库已归档（Archived），官方明确标注 “This repository is no longer maintained”。Vue 3 生态中，它已被更轻量、更契合 Composition API 的方案取代。把它当作 Vue 2 项目的“历史兼容层”，而非 Vue 3 的“首选方案”，是避免后期重构灾难的前提。

3. Vue 3 Composition API 下的 RxJS 集成：从 @vueuse/rxjs 到手写 useSubscription

Vue 3 的 Composition API 彻底改变了响应式集成的逻辑。Options API 时代靠 mixin 注入方法，Composition API 时代则靠 composable 函数封装逻辑。 @vueuse/rxjs 就是为此而生——它不是 vue-rx 的升级版，而是 专为 setup() 和 ref() / reactive() 设计的 RxJS 工具集 ，核心思想是： 让 Observable 的值变成真正的响应式引用（ref），并自动绑定生命周期 。

3.1 useObservable ：把 Observable 的最新值变成 ref

这是最常用、最安全的入口。它接收一个 Observable，返回一个 ref ，该 ref 的 .value 始终等于 Observable 最新发出的值：

import { useObservable } from '@vueuse/rxjs'
import { of, interval } from 'rxjs'
import { map } from 'rxjs/operators'

export default defineComponent({
  setup() {
    // 创建一个每秒发一次数字的 Observable
    const counter$ = interval(1000).pipe(map(i => i + 1))
    
    // useObservable 将其转换为 ref
    const counter = useObservable(counter$)
    
    // counter 是 Ref<number>，可在模板中直接 {{ counter }}
    // 也可在 setup 中 reactive 使用
    const doubled = computed(() => counter.value * 2)
    
    return { counter, doubled }
  }
})

原理很简单： useObservable 内部调用 onBeforeUnmount 注册清理函数，并在 onMounted （或立即）开始订阅。它返回的 ref 是响应式的，所以 counter.value 变化时，依赖它的 computed 或模板都会更新。 关键点在于：你拿到的是 ref ，不是 Observable，彻底规避了“Observable 本身不可响应”的陷阱 。

3.2 useSubscription ：手动控制订阅，应对复杂逻辑

当 useObservable 的“自动映射”不够用时（比如你需要 next / error / complete 的完整回调，或需要对多个 Observable 做 combineLatest 后再处理）， useSubscription 就派上用场了：

import { useSubscription } from '@vueuse/rxjs'
import { fromEvent, merge } from 'rxjs'
import { map, startWith } from 'rxjs/operators'

export default defineComponent({
  setup() {
    const click$ = fromEvent(document, 'click').pipe(map(e => 'click'))
    const keyup$ = fromEvent(document, 'keyup').pipe(map(e => 'keyup'))
    
    // 合并两个流
    const event$ = merge(click$, keyup$).pipe(startWith('init'))
    
    // useSubscription 接收 Observable 和一个处理函数
    useSubscription(event$, (event) => {
      console.log('Event:', event)
      // 这里可以做任何副作用：更新 state、调用 API、触发动画...
      // 且这个回调只在组件活跃时执行
    })
    
    return {}
  }
})

useSubscription 的精妙之处在于：它 不返回任何值，只确保回调函数在组件挂载后执行、在卸载前停止 。它内部用 onBeforeUnmount 存储了一个 Subscription 对象，并在组件销毁时调用 unsubscribe() 。你完全不用操心“这个 subscription 存在哪”、“什么时候取消”， @vueuse/rxjs 全包了。

3.3 手写 useSubscription ：理解原理，才能不被库绑架

虽然 @vueuse/rxjs 很好用，但理解其底层实现，能让你在库不满足需求时快速自定义。一个极简但生产可用的 useSubscription 是这样的：

import { onBeforeUnmount, getCurrentInstance } from 'vue'
import { Subscription, Observable } from 'rxjs'

export function useSubscription<T>(
  observable: Observable<T>,
  next: (value: T) => void,
  error?: (err: any) => void,
  complete?: () => void
): Subscription {
  // 创建 subscription
  const sub = observable.subscribe({
    next,
    error: error || console.error,
    complete: complete || (() => {})
  })

  // 获取当前组件实例（Vue 3 Composition API 中必须）
  const instance = getCurrentInstance()
  if (!instance) {
    throw new Error('useSubscription must be called inside setup()')
  }

  // 在组件卸载前取消订阅
  onBeforeUnmount(() => {
    if (!sub.closed) {
      sub.unsubscribe()
    }
  })

  return sub
}

这段代码只有 20 行，却揭示了所有关键点：

• getCurrentInstance() 是获取当前组件上下文的唯一途径，没有它，你无法在 setup() 中注册 onBeforeUnmount ；
• onBeforeUnmount 是清理的黄金位置，比 onUnmounted 更早，确保在组件 DOM 移除前就切断数据流；
• sub.closed 检查是防御性编程，防止重复取消导致错误；
• 它返回 Subscription 实例，意味着你可以随时手动调用 sub.unsubscribe() 强制中断，这是 useObservable 不提供的灵活性。

注意： @vueuse/rxjs 的 useSubscription 还支持 immediate: false 选项，即延迟订阅（等首次调用某个函数时才开始），这对按需加载数据流非常有用。手写版本可以轻松扩展这个参数，而 vue-rx 的 $subscribeTo 完全不支持。

4. 真实业务场景拆解：用 RxJS 解决 Vue 中“搜索建议”的经典难题

搜索建议（Search Suggestion）是前端面试和实际开发中的高频痛点。它表面简单：用户输入，后端返回匹配项。但真实场景充满“魔鬼细节”：输入防抖、取消上一次请求、加载态管理、错误重试、键盘导航（上下键选中）、回车提交……用 Vue 原生 watch + axios 写，代码会迅速膨胀成“回调地狱”。RxJS 的操作符链，正是为这种多条件、多状态、多时间维度的异步流程而生。

4.1 需求梳理与数据流建模

我们定义一个标准搜索框组件，需求如下：

• 用户在 <input> 中输入，触发搜索；
• 输入停止 300ms 后才发起请求（防抖）；
• 新输入开始时，自动取消上一次未完成的请求（避免资源浪费和 UI 错乱）；
• 搜索中显示“加载中…”提示；
• 请求失败时，显示错误信息，并提供“重试”按钮；
• 搜索结果以列表形式展示，支持键盘上下键导航；
• 用户按回车，提交当前高亮项。

这个需求涉及 4 个核心数据流：

• 输入流（Input Stream） ： fromEvent(inputEl, 'input') → 提取 event.target.value ；
• 请求流（Request Stream） ： input$.pipe(debounceTime(300), distinctUntilChanged(), filter(v => v.length > 1)) → 防抖、去重、过滤短词；
• 响应流（Response Stream） ： request$.pipe(switchMap(query => ajax( /api/suggest?q=${query} ))) → switchMap 天然取消上一次请求；
• UI 状态流（UI State Stream） ： merge(loading$, error$, results$) → 合并所有影响 UI 的信号。

4.2 完整可运行代码实现（Vue 3 + TypeScript）

<template>
  <div class="search-container">
    <input
      ref="inputRef"
      v-model="searchQuery"
      @keydown.up.prevent="navigate(-1)"
      @keydown.down.prevent="navigate(1)"
      @keydown.enter.prevent="submitSelection"
      placeholder="搜索..."
      class="search-input"
    />
    
    <!-- 加载态 -->
    <div v-if="loading" class="loading">加载中...</div>
    
    <!-- 错误态 -->
    <div v-else-if="error" class="error">
      {{ error }}
      <button @click="retrySearch">重试</button>
    </div>
    
    <!-- 结果列表 -->
    <ul v-else-if="suggestions.length" class="suggestions">
      <li
        v-for="(item, index) in suggestions"
        :key="item.id"
        :class="{ active: selectedIndex === index }"
        @click="selectItem(item)"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onBeforeUnmount, Ref } from 'vue'
import { 
  fromEvent, 
  of, 
  Subject, 
  merge, 
  Observable 
} from 'rxjs'
import { 
  debounceTime, 
  distinctUntilChanged, 
  filter, 
  switchMap, 
  catchError, 
  map, 
  startWith,
  shareReplay 
} from 'rxjs/operators'

// 模拟 API
const mockApi = (query: string): Observable<any[]> => {
  return of([
    { id: 1, name: `${query} 教程` },
    { id: 2, name: `${query} 下载` },
    { id: 3, name: `${query} 官网` }
  ]).pipe(delay(500)) // 模拟网络延迟
}

interface SuggestionItem {
  id: number
  name: string
}

export default defineComponent({
  name: 'SearchSuggest',
  setup() {
    // DOM 引用
    const inputRef = ref<HTMLInputElement | null>(null)
    // 响应式状态
    const searchQuery = ref('')
    const suggestions = ref<SuggestionItem[]>([])
    const loading = ref(false)
    const error = ref<string | null>(null)
    const selectedIndex = ref(-1)

    // 主题流：输入事件
    const input$ = new Subject<string>()
    
    // 请求流：防抖、去重、过滤
    const request$ = input$.pipe(
      debounceTime(300),
      distinctUntilChanged(),
      filter(q => q.length > 1),
      // 切换请求：新请求到来，自动取消旧请求
      switchMap(query => 
        mockApi(query).pipe(
          map(res => ({ data: res, error: null })),
          catchError(err => of({ data: [], error: err.message }))
        )
      )
    )

    // UI 状态流：合并 loading、error、results
    const uiState$ = merge(
      request$.pipe(
        map(() => ({ loading: true, error: null, results: [] })),
        startWith({ loading: false, error: null, results: [] })
      ),
      request$.pipe(
        map(({ data, error }) => ({
          loading: false,
          error: error || null,
          results: data || []
        }))
      )
    ).pipe(shareReplay({ bufferSize: 1, refCount: true }))

    // 订阅 UI 状态流
    let uiSub: import('rxjs').Subscription
    onMounted(() => {
      uiSub = uiState$.subscribe(state => {
        loading.value = state.loading
        error.value = state.error
        suggestions.value = state.results
        selectedIndex.value = -1 // 重置选中
      })
    })
    onBeforeUnmount(() => {
      if (uiSub && !uiSub.closed) uiSub.unsubscribe()
    })

    // 监听 input 事件，推送到 input$
    onMounted(() => {
      if (inputRef.value) {
        const sub = fromEvent(inputRef.value, 'input').subscribe((e: Event) => {
          const target = e.target as HTMLInputElement
          input$.next(target.value)
        })
        // 清理 input 事件监听
        onBeforeUnmount(() => sub.unsubscribe())
      }
    })

    // 键盘导航
    const navigate = (direction: number) => {
      const len = suggestions.value.length
      if (len === 0) return
      selectedIndex.value = Math.max(-1, Math.min(len - 1, selectedIndex.value + direction))
    }

    // 选中并提交
    const selectItem = (item: SuggestionItem) => {
      searchQuery.value = item.name
      // 触发搜索（可选）
      input$.next(item.name)
    }

    const submitSelection = () => {
      if (selectedIndex.value >= 0 && suggestions.value[selectedIndex.value]) {
        const item = suggestions.value[selectedIndex.value]
        searchQuery.value = item.name
        // 这里可以 emit 事件或调用父组件方法
      }
    }

    const retrySearch = () => {
      if (searchQuery.value) {
        input$.next(searchQuery.value)
      }
    }

    return {
      inputRef,
      searchQuery,
      suggestions,
      loading,
      error,
      selectedIndex,
      navigate,
      selectItem,
      submitSelection,
      retrySearch
    }
  }
})
</script>

4.3 关键设计决策解析：为什么这样写？

为什么用 Subject 而不是直接 fromEvent ？
fromEvent(input, 'input') 每次调用都创建新流，而 Subject 是一个可多播的中心枢纽。 input$ 被 request$ 和后续的 uiState$ 多次订阅，如果直接用 fromEvent ，每次订阅都会重新绑定事件监听器，导致内存泄漏。 Subject 确保事件只被监听一次，所有下游流共享同一份输入。

为什么 switchMap 是取消请求的银弹？
switchMap 的语义是：“ 取消前一个内部 Observable 的订阅，订阅新的 Observable ”。当用户快速输入 “a” -> “ab” -> “abc”， request$ 会依次产生 mockApi('a') 、 mockApi('ab') 、 mockApi('abc') 。 switchMap 保证只有最后一个 mockApi('abc') 的结果会到达下游，前两个请求的 Observable 会被自动 unsubscribe() ，其内部的 fetch 或 XMLHttpRequest 也会被浏览器终止（现代浏览器支持 AbortController ， rxjs/ajax 已内置）。

为什么 uiState$ 要用 shareReplay ？
uiState$ 被 uiSub 订阅，但它内部 merge 了两个流：一个发 loading: true ，一个发 loading: false 。如果没有 shareReplay ， merge 的两个源流会各自独立执行，可能导致状态不一致。 shareReplay({ bufferSize: 1, refCount: true }) 确保：

• bufferSize: 1 ：只缓存最新一个值，供新订阅者立即获取；
• refCount: true ：当最后一个订阅者取消时，自动取消上游所有流，避免资源浪费。

实测心得：在真实项目中，我们曾用这套模式替换掉一个 800 行的 watch + cancelToken 方案，代码量减少 60%，可读性提升巨大。最关键的是， switchMap 的取消逻辑是声明式的、无副作用的，而手写 cancelToken 容易漏掉某个分支，导致“幽灵请求”在后台静默执行。

5. 避坑指南：那些只有踩过才知道的 RxJS + Vue 雷区

即使你熟读 RxJS 文档、精通 Vue 生命周期，集成时依然会掉进一些“文档不会写，但线上会炸”的深坑。这些坑往往源于对两个系统底层机制的微妙差异缺乏敬畏。以下是我在三个大型项目中踩出的血泪经验。

5.1 雷区一： computed 中的 Observable 订阅——“看不见的内存泄漏”

错误代码：

setup() {
  const query = ref('')
  const results$ = computed(() => 
    of(query.value).pipe(
      delay(1000),
      map(q => [{ id: 1, name: q }])
    )
  )
  
  // ❌ 危险！每次 query.value 变化，results$ 都会返回一个新 Observable
  // 但你从未取消旧 Observable 的订阅！
  const results = useObservable(results$.value)
  
  return { results }
}

问题根源： computed 的响应式更新是“惰性”的，它只在被访问时求值。 results$.value 每次调用都创建一个新 Observable， useObservable 会为每个 Observable 创建一个新订阅。但旧的 Observable 订阅永远不会被取消，因为 useObservable 只知道它当前拿到的那个 Observable，不知道之前那个。

正确解法：用 watch 替代 computed ，显式管理订阅生命周期

setup() {
  const query = ref('')
  const results = ref<any[]>([])
  
  // watch query 变化，主动创建/取消订阅
  let currentSub: Subscription | null = null
  watch(query, (newVal) => {
    // 取消上一次订阅
    if (currentSub && !currentSub.closed) {
      currentSub.unsubscribe()
    }
    // 创建新订阅
    currentSub = of(newVal).pipe(
      delay(1000),
      map(q => [{ id: 1, name: q }])
    ).subscribe(data => results.value = data)
  })
  
  onBeforeUnmount(() => {
    if (currentSub && !currentSub.closed) currentSub.unsubscribe()
  })
  
  return { results }
}

5.2 雷区二： v-model 与 useObservable 的双向绑定幻觉

useObservable 只提供“从 Observable 到 ref”的单向映射。如果你试图用它实现 v-model 的双向绑定，会发现输入框无法编辑：

// ❌ 错误：试图用 useObservable 做双向绑定
const inputValue$ = new BehaviorSubject('')
const inputRef = useObservable(inputValue$)

// 模板中 {{ inputRef }} 正常显示，但 v-model="inputRef" 会报错
// 因为 inputRef 是 Ref，不是普通值，且 useObservable 不监听 ref 变化反推 Observable

正确解法：用 watch 监听 ref 变化，手动 next 到 Subject

setup() {
  const inputValue$ = new BehaviorSubject('')
  const inputRef = ref('')
  
  // 从 Observable 到 ref（单向）
  useSubscription(inputValue$, val => inputRef.value = val)
  
  // 从 ref 到 Observable（单向）
  watch(inputRef, (newVal) => {
    inputValue$.next(newVal)
  })
  
  return { inputRef }
}

5.3 雷区三： onBeforeUnmount 的执行时机陷阱——“组件已死，订阅犹存”

Vue 的 onBeforeUnmount 钩子在组件 unmounted 之前执行，但 它不保证在所有子组件的 onBeforeUnmount 之后执行 。如果你的组件 A 包含子组件 B，B 内部有一个 useSubscription ，而 A 的 onBeforeUnmount 里又调用了 B.someMethod() ，这个 someMethod() 如果内部还依赖 B 的某个 Observable，就可能出错。

根本原因 ： onBeforeUnmount 的执行顺序是“深度优先”，即先执行子组件的 onBeforeUnmount ，再执行父组件的。但 useSubscription 的清理逻辑是“就近原则”，它只管自己组件内的订阅。

解决方案：永远用 onUnmounted 做最终兜底，而非 onBeforeUnmount

// 更健壮的手写 useSubscription
export function useSubscription<T>(
  observable: Observable<T>,
  next: (value: T) => void,
  error?: (err: any) => void,
  complete?: () => void
): Subscription {
  const sub = observable.subscribe({ next, error, complete })
  
  // 用 onUnmounted 替代 onBeforeUnmount，确保在所有子组件清理完毕后执行
  onUnmounted(() => {
    if (!sub.closed) sub.unsubscribe()
  })
  
  return sub
}

onUnmounted 是 Vue 3 的新钩子，它在组件及其所有子组件的 onBeforeUnmount 都执行完毕后，才被调用。这是清理“跨组件依赖”的黄金时机。

最后分享一个小技巧：在开发环境，用 rxjs/operators/tap 打印订阅/取消日志，是定位泄漏的最快方式。

useSubscription(
  myObs$.pipe(tap({ 
    subscribe: () => console.log('✅ Subscribed'), 
    unsubscribe: () => console.log('❌ Unsubscribed') 
  })),
  console.log
)

看控制台里“✅”和“❌”是否成对出现，不成对的就是泄漏点。