WeakRef 实现可主动释放的组件 Ref 容器

WeakRef 并非响应式替代方案，而是一种专为防止内存泄漏设计的弱引用机制——它不提供 `.value`、不触发依赖追踪、也不参与 Vue/React 的响应式系统，必须配合 `ref` 或 `useRef` 使用；其真正价值在于安全持有大型外部实例（如编辑器、地图、WebGL 渲染器等），通过手动创建 WeakRef + 主动销毁 + 可选 FinalizationRegistry 兜底，实现组件卸载时资源的“可主动释放”，从而避免闭包引用导致的内存驻留问题，是构建高性能、长生命周期前端应用的关键底层实践。

WeakRef 本身不能直接用于 Vue 或 React 的响应式 ref 容器，因为它不提供响应式能力，也不参与依赖追踪。它只是一种弱引用持有机制，用于避免内存泄漏——尤其适合缓存、实例映射、第三方库集成等场景。所谓“主动释放”的 Ref 容器，本质不是靠 WeakRef 实现响应式更新，而是用它来安全包裹外部对象（如 DOM 元素、编辑器实例、Canvas 上下文）

为什么不能用 WeakRef 替代 ref/reactive？

WeakRef 持有的值无法被 Vue/React 自动追踪变化：
- 它没有 .value 属性，不触发 getter/setter
- 它的 target 是手动调用 .deref() 才能访问，且可能返回 undefined（已被 GC）
- Vue 的依赖收集系统（track/trigger）和 React 的 useState/useReducer 都不识别 WeakRef 实例
所以 WeakRef 不是响应式容器的替代品，而是配合 ref 使用的“安全外挂”。

典型适用场景：管理第三方非响应式实例

比如 wangEditor、Mapbox 实例、WebGL 渲染器、音频上下文等——它们体积大、有独立生命周期，且容易因闭包引用导致组件卸载后仍驻留内存。
正确做法是：
- 用 ref 存储 WeakRef 实例（保持响应式绑定能力）
- 在 onMounted 中创建并存入 WeakRef
- 在 onBeforeUnmount/beforeUnmount 中调用 .destroy() 并清空 ref
- 后续需使用时，先 deref() 判断是否有效，再操作

• ✅ 示例（Vue 3 + wangEditor）：

const editorRef = ref(null)
onMounted(() => {
  const editor = new Editor('#editor')
  editor.create()
  editorRef.value = new WeakRef(editor) // 安全持有
})
onBeforeUnmount(() => {
  if (editorRef.value) {
    const editor = editorRef.value.deref()
    if (editor && typeof editor.destroy === 'function') {
      editor.destroy()
    }
  }
  editorRef.value = null // 主动切断引用
})

进阶技巧：WeakRef + FinalizationRegistry 实现自动兜底清理

当某些资源（如 CanvasRenderingContext2D、Blob URL）难以在组件卸载时 100% 确保手动释放，可搭配 FinalizationRegistry 做“最后防线”：
- 创建 registry 时注册回调，在对象被 GC 时触发清理逻辑
- 将 WeakRef 和 registry 绑定，确保仅当对象真正不可达时才执行副作用
- 注意：registry 回调是异步、不可靠的（不保证立即执行），仅作补充，不能替代主动销毁

• ⚠️ 不推荐在组件 setup 内重复创建 registry（会泄漏）；应定义为模块级单例
• ✅ registry 回调中只能执行纯清理操作（如 revoke ObjectURL、cancelAnimationFrame），不可访问 Vue 响应式状态或 this

React 中的等效实践

React 没有内置 WeakRef 支持，但可用 useRef + useEffect 模拟相同语义：
- useRef 存储 WeakRef 实例（同 Vue）
- useEffect 返回的 cleanup 函数中主动销毁外部实例
- 若需更精细控制，可封装自定义 Hook（如 useWeakInstance）

const useWeakInstance = (factory) => {
  const ref = useRef(null)
  useEffect(() => {
    const instance = factory()
    ref.current = new WeakRef(instance)
    return () => {
      if (ref.current) {
        const inst = ref.current.deref()
        if (inst?.destroy) inst.destroy()
      }
    }
  }, [])
  return () => ref.current?.deref()
}

到这里，我们也就讲完了《WeakRef 实现可主动释放的组件 Ref 容器》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！