Vue 3 多实例 + 缓存复用理念及实践架构

interface InstanceRecord {
  app: ReturnType<typeof createApp> // Vue 应用实例
  cache: any                        // 业务数据快照，用于保存实例相关的业务数据
  mounted: boolean                  // 标记实例是否已挂载
  lastUsedAt: number                // 最后使用时间，用于判断实例是否过期
}
const instancePool = new Map<string, InstanceRecord>()

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
export function createAppInstance(targetId: string, initData: any = {}) {
  // 检查缓存池，存在则更新最后使用时间并返回
  if (instancePool.has(targetId)) {
    const rec = instancePool.get(targetId)!
    rec.lastUsedAt = Date.now()
    return rec
  }
  // 确保挂载容器存在，不存在则创建并添加到文档中
  let el = document.getElementById(targetId)
  if (!el) {
    el = document.createElement('div')
    el.id = targetId
    document.body.appendChild(el)
  }
  // 创建 Vue 应用实例，配置 Pinia 状态管理
  const app = createApp(App)
}

app.provide('initData', JSON.parse(JSON.stringify(initData)))

<script setup>
import { inject } from 'vue'
// 获取注入的初始化数据，默认值为空对象
const initData = inject('initData', {})
console.log('当前实例初始化数据:', initData)
</script>

/**
 * 显示指定实例的容器
 * @param targetId 实例挂载容器的 id
 */
export function showApp(targetId: string) {
  const el = document.getElementById(targetId)
  if (el) el.style.display = 'block'
  // 可选：更新实例最后使用时间
  const rec = instancePool.get(targetId)
  if (rec) rec.lastUsedAt = Date.now()
}
/**
 * 隐藏指定实例的容器
 * @param targetId 实例挂载容器的 id
 */
export function hideApp(targetId: string) {
  const el = document.getElementById(targetId)
  if (el) el.style.display = 'none'
}

// 推荐：只打印关键信息
const rec = instancePool.get(targetId)
if (rec) {
  console.log('实例调试信息:', {
    targetId,
    cache: rec.cache,
    container: rec.app._container,
    lastUsedAt: new Date(rec.lastUsedAt).toLocaleString()
  })
}
// 不推荐：直接打印完整实例
// console.log(rec.app) // 会输出大量冗余信息

// 模块级共享的响应式数据，会导致多实例监听冲突
export const sharedRef = ref(0)

<script setup>
import { sharedRef, watch } from 'vue'
// 多个实例都会监听 sharedRef，数据变化时所有实例的 watch 都会触发
watch(sharedRef, (newVal) => {
  console.log('sharedRef 变化:', newVal)
})
</script>

<script setup>
import { ref, watch } from 'vue'
// 组件内部创建响应式数据，每个实例独立
const privateRef = ref(0) 
watch(privateRef, (newVal) => {
  console.log('当前实例 privateRef 变化:', newVal)
})
</script>

<script setup>
import { onUnmounted } from 'vue'
// 1. 定时器清理
const timer = setInterval(() => {
  console.log('定时器执行')
}, 1000)
// 2. 全局事件监听清理
function handleResize() {
  console.log('窗口大小变化')
}
window.addEventListener('resize', handleResize)
// 3. WebSocket 连接清理
const ws = new WebSocket('wss://example.com')
ws.onopen = () => {
  ws.send('连接建立')
}
// 在组件卸载时清理所有资源
onUnmounted(() => {
  // 清理定时器
  clearInterval(timer)
  // 移除全局事件监听
  window.removeEventListener('resize', handleResize)
  // 关闭 WebSocket 连接
  if (ws.readyState === WebSocket.OPEN) {
    ws.close(1000, '组件卸载')
  }
  // 若使用 RxJS 等订阅流，需取消订阅
  // subscription.unsubscribe()
})
</script>

// 工具函数：创建并返回唯一容器
export function createContainer(prefix: string): string {
  const targetId = `${prefix}-${Date.now()}-${Math.random().toString(36).slice(2)}`
  const el = document.createElement('div')
  el.id = targetId
  document.body.appendChild(el)
  return targetId
}
// 工具函数：安全删除容器
export function destroyContainer(targetId: string) {
  const el = document.getElementById(targetId)
  if (el && el.parentNode) {
    el.parentNode.removeChild(el)
  }
}

export function showApp(targetId: string) {
  const el = document.getElementById(targetId)
  if (!el) {
    throw new Error(`实例容器 ${targetId} 已被删除，请检查 DOM 操作`)
  }
  el.style.display = 'block'
}

<!-- ChatWindow.vue：使用 scoped 样式 -->
<style scoped>
.chat-title {
  font-size: 16px;
  color: #333;
}
</style>

<!-- 或使用 CSS Modules -->
<style module>
.title {
  font-size: 16px;
  color: #333;
}
</style>
<template>
  <h2 :class="$style.title">聊天窗口</h2>
</template>

// 改造 createAppInstance：使用 Shadow DOM 隔离样式
export function createAppInstance(targetId: string, initData: any = {}) {
  // ... 省略缓存检查逻辑 ...
  let el = document.getElementById(targetId)
  if (!el) {
    el = document.createElement('div')
    el.id = targetId
    // 创建 Shadow DOM 并附加到容器
    const shadowRoot = el.attachShadow({ mode: 'open' })
    // 在 Shadow DOM 中创建挂载点
    const mountPoint = document.createElement('div')
    mountPoint.id = `mount-${targetId}`
    shadowRoot.appendChild(mountPoint)
    document.body.appendChild(el)
  }
  // 注意：此时挂载目标需改为 Shadow DOM 中的挂载点
  const shadowRoot = el.shadowRoot
  if (!shadowRoot) {
    throw new Error(`容器 ${targetId} 未初始化 Shadow DOM`)
  }
  const mountPoint = shadowRoot.getElementById(`mount-${targetId}`)
  if (!mountPoint) {
    throw new Error(`Shadow DOM 挂载点不存在`)
  }
  // 挂载到 Shadow DOM 内的节点
  const app = createApp(App)
  app.mount(mountPoint)
  // ... 省略后续逻辑 ...
}

// 实例中生成唯一样式前缀
const stylePrefix = `chat-window-${targetId}`

<template>
  <div :class="stylePrefix">
    <h2 :class="`${stylePrefix}__title`">聊天窗口</h2>
  </div>
</template>
<style>
.chat-window-${targetId}__title {
  font-size: 16px;
  color: #333;
}
</style>

// 配置：最大实例数
const MAX_INSTANCE_COUNT = 5
export function createAppInstance(targetId: string, initData: any = {}) {
  // 1. 检查缓存，存在则直接返回
  if (instancePool.has(targetId)) {
    // ... 省略缓存逻辑 ...
  }
  // 2. 若实例数超过阈值，销毁最久未使用的实例
  if (instancePool.size >= MAX_INSTANCE_COUNT) {
    // 按 lastUsedAt 排序，取最久未使用的实例
    const sortedInstances = Array.from(instancePool.entries()).sort(
      ([, a], [, b]) => a.lastUsedAt - b.lastUsedAt
    )
    const [oldTargetId] = sortedInstances[0]
    destroyApp(oldTargetId)
    console.log(`实例数超过阈值，销毁最久未使用实例：${oldTargetId}`)
  }
  // 3. 创建新实例
  // ... 省略实例创建逻辑 ...
}

<!-- ChatWindow.vue：懒加载非核心组件 -->
<template>
  <div class="chat-window">
    <MessageList /> <!-- 核心组件：立即加载 -->
    <ChatInput />   <!-- 核心组件：立即加载 -->
    <template v-if="showSearchPanel">
      <!-- 非核心组件：懒加载 -->
      <Suspense>
        <template #default>
          <SearchPanel />
        </template>
        <template #fallback>
          <div>加载中...</div>
        </template>
      </Suspense>
    </template>
  </div>
</template>
<script setup>
import MessageList from './MessageList.vue'
import ChatInput from './ChatInput.vue'
// 懒加载非核心组件
const SearchPanel = defineAsyncComponent(() => import('./SearchPanel.vue'))
const showSearchPanel = ref(false)
</script>

// 错误：缓存复杂对象（消息列表）
const rec: InstanceRecord = {
  app,
  cache: {
    userId: initData.userId,
    messages: initData.messages // 复杂数组，占用内存大
  },
  // ... 其他字段 ...
}
// 正确：仅缓存轻量快照
const rec: InstanceRecord = {
  app,
  cache: {
    userId: initData.userId,
    unreadCount: initData.messages.filter(m => !m.read).length // 仅缓存统计结果
  },
  // ... 其他字段 ...
}

export function destroyApp(targetId: string) {
  const rec = instancePool.get(targetId)
  if (!rec) return
  // 异步执行销毁，避免阻塞主线程
  requestIdleCallback(() => {
    // 1. 卸载 Vue 应用
    rec.app.unmount()
    // 2. 移除缓存记录
    instancePool.delete(targetId)
    // 3. 删除 DOM 容器
    const el = document.getElementById(targetId)
    if (el && el.parentNode) {
      el.parentNode.removeChild(el)
    }
    console.log(`实例 ${targetId} 已异步销毁`)
  }, { timeout: 1000 }) // 1 秒内若未空闲，强制执行
}

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ChatWindow from './ChatWindow.vue'
// 实例记录接口
interface InstanceRecord {
  app: ReturnType<typeof createApp>
  cache: { userId: string; title: string }
  mounted: boolean
  lastUsedAt: number
}
// 缓存池
const instancePool = new Map<string, InstanceRecord>()
// 配置：最大实例数
const MAX_INSTANCE_COUNT = 3
// 创建/获取聊天窗口实例
export function openChatWindow(initData: { userId: string; title: string }): string {
  // 生成唯一 targetId（基于用户 ID + 时间戳）
  const targetId = `chat-window-${initData.userId}-${Date.now().toString().slice(-4)}`
  // 1. 检查缓存，存在则显示并返回
  if (instancePool.has(targetId)) {
    const rec = instancePool.get(targetId)!
    rec.lastUsedAt = Date.now()
    showChatWindow(targetId)
    return targetId
  }
  // 2. 实例数超过阈值，销毁最久未使用实例
  if (instancePool.size >= MAX_INSTANCE_COUNT) {
    const sortedInstances = Array.from(instancePool.entries()).sort(
      ([, a], [, b]) => a.lastUsedAt - b.lastUsedAt
    )
    const [oldTargetId] = sortedInstances[0]
    closeChatWindow(oldTargetId)
  }
  // 3. 创建容器（含 Shadow DOM 样式隔离）
  const container = document.createElement('div')
  container.id = targetId
  container.style.position = 'fixed'
  container.style.bottom = '20px'
  container.style.right = `${(instancePool.size * 320) + 20}px` // 窗口横向排列
  container.style.width = '300px'
  container.style.height = '400px'
  container.style.border = '1px solid #eee'
  container.style.borderRadius = '8px'
  container.style.overflow = 'hidden'
  // 初始化 Shadow DOM
  const shadowRoot = container.attachShadow({ mode: 'open' })
  const mountPoint = document.createElement('div')
  shadowRoot.appendChild(mountPoint)
  document.body.appendChild(container)
  // 4. 创建 Vue 实例
  const app = createApp(ChatWindow)
  const pinia = createPinia()
  app.use(pinia)
  // 注入初始化数据
  app.provide('chatInitData', { ...initData, targetId })
  // 挂载到 Shadow DOM 内的节点
  app.mount(mountPoint)
  // 5. 加入缓存池
  const rec: InstanceRecord = {
    app,
    cache: { userId: initData.userId, title: initData.title },
    mounted: true,
    lastUsedAt: Date.now()
  }
  instancePool.set(targetId, rec)
  return targetId
}
// 显示聊天窗口
export function showChatWindow(targetId: string) {
  const container = document.getElementById(targetId)
  if (container) container.style.display = 'block'
}
// 隐藏聊天窗口
export function hideChatWindow(targetId: string) {
  const container = document.getElementById(targetId)
  if (container) container.style.display = 'none'
}