Bootstrap 5 + Vue3：如何在beforeUnmount阶段销毁所有Tooltip实例

Bootstrap 5 的Tooltip实例默认绑定在对应的触发元素（带data-bs-toggle="tooltip"属性的元素）上，你可以通过官方提供的Tooltip.getInstance静态方法获取元素对应的实例，再调用实例的dispose()方法完成销毁。该方法会自动清除实例绑定的所有事件监听、移除关联DOM元素，是官方推荐的标准销毁方式。

方案1：挂载时存储实例引用（更推荐，性能更好） #

你可以在组件中维护一个Tooltip实例数组，挂载实例时把所有生成的实例存起来，销毁时直接遍历调用dispose即可：

选项式API实现 #

// 组件data中新增存储数组
data() {
  return {
    tooltipInstances: []
  }
},
// 挂载时的逻辑
mounted() {
  const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  this.tooltipInstances = tooltipTriggerList.map(tooltipTriggerEl => {
    return new Tooltip(tooltipTriggerEl)
  })
},
// 销毁前的逻辑
beforeUnmount() {
  this.tooltipInstances.forEach(tooltipInstance => {
    tooltipInstance.dispose()
  })
  this.tooltipInstances = []
}

组合式API实现 #

import { ref, onMounted, onBeforeUnmount } from 'vue'

const tooltipInstances = ref([])

onMounted(() => {
  const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  tooltipInstances.value = tooltipTriggerList.map(tooltipTriggerEl => {
    return new Tooltip(tooltipTriggerEl)
  })
})

onBeforeUnmount(() => {
  tooltipInstances.value.forEach(tooltipInstance => {
    tooltipInstance.dispose()
  })
  tooltipInstances.value = []
})

方案2：不存储实例，直接获取已创建实例销毁 #

如果你不想额外维护实例数组，也可以在销毁前遍历所有Tooltip触发元素，获取对应实例后销毁：

beforeUnmount() {
  const tooltipTriggerList = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
  tooltipTriggerList.forEach(tooltipTriggerEl => {
    const tooltipInstance = Tooltip.getInstance(tooltipTriggerEl)
    if (tooltipInstance) {
      tooltipInstance.dispose()
    }
  })
}

原实现存在的问题 #

直接移除.tooltip元素只会删除当前可见的Tooltip DOM节点，但是Tooltip实例本身还留存在内存中，绑定的事件监听也没有被清除，不仅会有内存泄漏风险，也可能导致后续重复初始化Tooltip时出现异常。

内容的提问来源于stack exchange，提问作者Riched