成人欧美一区二区三区的电影,日韩一级一欧美一级国产,国产成人国拍亚洲精品,无码人妻精品一区二区三区毛片,伊人久久无码大香线蕉综合

三、實(shí)戰(zhàn)驗(yàn)證：用 Chrome DevTools 抓“幽靈”

打開 Chrome → Memory 面板 → Take heap snapshot：

1. 打開頁(yè)面，添加 3 個(gè)聯(lián)系人

2. 卡片刪除所有卡片

3. 手動(dòng)觸發(fā)垃圾回收（GC）

4. 再次快照

在 Comparison 模式下你會(huì)發(fā)現(xiàn)：

• Detached <div>：3 個(gè)脫離 DOM 的元素

• Closure 或 Function：3 個(gè)對(duì)應(yīng)的事件處理函數(shù)

• VueComponent：3 個(gè)未被回收的組件實(shí)例

這些就是“幽靈組件”——它們已經(jīng)不在頁(yè)面上，卻依然占據(jù)內(nèi)存。

四、正確寫法：綁定與解綁必須成對(duì)出現(xiàn)

mounted() {
  document.addEventListener('click', this.handleClickOutside)
},
beforeDestroy() {
  // ? 必須解綁
  document.removeEventListener('click', this.handleClickOutside)
}

或者使用 事件選項(xiàng) { once: true } 自動(dòng)清理：

mounted() {
  document.addEventListener('click', this.handleClickOutside, { once: true })
}

但在輪詢或持續(xù)監(jiān)聽場(chǎng)景中，手動(dòng)管理仍是必須的。

五、除了事件監(jiān)聽，還有哪些常見內(nèi)存泄漏點(diǎn)？

1.定時(shí)器未清理（最常見）

mounted() {
  this.timer = setInterval(() => {
    console.log(this.msg) // 引用組件實(shí)例
  }, 1000)
},
beforeDestroy() {
  // ?? 忘記 clearInterval(this.timer)
}

同樣的引用鏈：window → setInterval → callback → component

2. 觀察者模式未退訂

使用 EventBus 或自定義事件系統(tǒng)時(shí)：

// main.js
export const bus = new Vue()


// ComponentA.vue
mounted() {
  bus.$on('data-updated', this.handleUpdate) // ?? 忘記 $off
}

即使 ComponentA 銷毀了，bus 仍持有其 handleUpdate 方法，導(dǎo)致實(shí)例無法回收。

正確做法：

beforeDestroy() {
  bus.$off('data-updated', this.handleUpdate)
}

3. 閉包引用大型對(duì)象

function createWorker() {
  const hugeData = new Array(1000000).fill('leak') // 100萬條數(shù)據(jù)


  return {
    process(id) {
      return hugeData[id] // ?? 閉包引用，無法釋放
    },
    cleanup() {
      hugeData.length = 0 // 手動(dòng)清空
    }
  }
}

只要 process 函數(shù)存在，hugeData 就不會(huì)被回收。

4. DOM 引用未釋放:

let globalRef = null


mounted() {
  globalRef = this.$el // ?? 把 DOM 節(jié)點(diǎn)掛到全局變量
}

即使組件銷毀，globalRef 仍指向舊 DOM，且其關(guān)聯(lián)的事件、屬性都無法清理。

5. WeakMap/WeakSet 使用不當(dāng)

你以為 WeakMap 能自動(dòng)清理？錯(cuò)！只有鍵（key）是對(duì)象時(shí)才弱引用：

const cache = new WeakMap()


mounted() {
  const key = { id: this._uid }
  cache.set(key, this.someHeavyData) // ? key 是局部對(duì)象，WeakMap 無效
}

正確用法是把 組件實(shí)例作為 key：

const cache = new WeakMap()


// 全局緩存，key 是組件實(shí)例，value 是計(jì)算結(jié)果
cache.set(this, expensiveResult)
// 當(dāng)組件被回收，cache 中對(duì)應(yīng)條目自動(dòng)消失

六、主流框架如何幫我們規(guī)避？

記住：框架只能管“它知道的”事件。一旦你走出框架封裝，進(jìn)入原生 API，責(zé)任就回到開發(fā)者身上。

mounted() {
  this.ws = new WebSocket('wss://live-data')
},
beforeDestroy() {
  this.ws.close() // ?? 必須關(guān)閉，否則連接和回調(diào)都駐留
}