如何在Vue组件beforeDestroy钩子中断开Vuetify v-intersect观察者？

我太懂这个糟心的情况了——用v-intersect监听滚动更新导航栏状态，结果路由切走之后它还在后台偷偷修改Vuex，导致导航栏内容乱跳。既然v-intersect.once满足不了你的业务需求，那咱们可以手动接管IntersectionObserver实例的生命周期，在组件销毁时彻底断开它的监听。

具体操作分两步走：

1. 保存观察者实例的引用 #

v-intersect的回调函数会传入第二个参数observer，这就是咱们要找的IntersectionObserver实例。咱们把它存在组件的data里，方便后续销毁时调用。

2. 在beforeDestroy钩子中断开监听 #

当组件要被销毁时，调用观察者的disconnect()方法（彻底停止所有监听），或者用unobserve()单独停止监听当前组件的目标元素。推荐用disconnect()，清理得更彻底。

修改后的完整代码如下：

<template>
  ...
  <div v-intersect="intersect" ref="intersectTarget" />
  ...
</template>

<script>
import { mapFields } from 'vuex-map-fields'

export default {
  data() {
    return {
      intersectionObserver: null // 用来存储观察者实例
    }
  },
  computed: {
    ...mapFields(['isIntersecting']),
  },
  methods: {
    intersect(entries, observer) {
      // 首次触发时保存观察者实例
      if (!this.intersectionObserver) {
        this.intersectionObserver = observer
      }
      this.isIntersecting = !!entries[0].intersectionRatio
    },
  },
  beforeDestroy() {
    // 先判断实例存在，避免报错
    if (this.intersectionObserver) {
      // 如果你只想停止监听当前元素，可替换为：
      // this.intersectionObserver.unobserve(this.$refs.intersectTarget)
      // 彻底停止所有监听用disconnect
      this.intersectionObserver.disconnect()
      // 清空引用，避免内存泄漏
      this.intersectionObserver = null
    }
  }
}
</script>

额外说明 #

• disconnect()会让观察者停止监听所有关联的目标元素，适合组件销毁时的全局清理；如果同一个观察者监听了多个元素，unobserve()可以单独停止某一个元素的监听。
• 给目标元素加ref是为了在需要unobserve时能精准获取元素，如果你能通过entries[0].target拿到目标元素，也可以不用ref。

这样处理后，组件销毁时观察者就会被彻底清理，再也不会偷偷触发回调修改Vuex状态了！

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