Turbolinks环境下调用destroy()后Vue实例仍内存泄漏如何排查

问题背景 #

我有一个使用Turbolinks的Rails应用，Turbolinks的运行逻辑是保持document和window对象始终存在（页面永远不会刷新），通过AJAX拦截所有链接点击并替换body标签。
当在挂载了Vue应用的页面之间来回导航时，观察到内存/节点数量呈无限增长趋势：

可见每次页面切换内存只会上升，从未被回收。

应用使用的vue-turbolinks库核心代码如下：

beforeMount: function() {
  if (this === this.$root && this.$el) {
    document.addEventListener('turbolinks:visit', function teardown() {
      this.$destroy();
      document.removeEventListener('turbolinks:visit', teardown);
    })

    // 缓存原始元素
    this.$cachedHTML = this.$el.outerHTML;

    // 注册根钩子，销毁时恢复原始元素
    this.$once('hook:destroyed', function() {
      if( this.$el.parentNode )
        this.$el.outerHTML = this.$cachedHTML
    });
  }
}

已确认的前置条件：

• 没有在window或其他全局位置持有Vue应用的引用，实例化代码仅为new Vue({ options})，无全局变量，使用const/let这类现代语法声明
• 应用内部没有手动添加document.addEventListener调用，所有事件监听器都通过v-on绑定，Vue销毁时会自动移除这些监听器

为进一步调试，修改了上述代码，在销毁Vue实例前添加了WeakRef存储，代码如下：

document.addEventListener('turbolinks:visit', function teardown() {
  window.weakReferences = window.weakReferences || {};
  window.weakReferences[new Date()] = new window.WeakRef(this);
  this.$destroy();
})

多次切换页面后，确认Vue对象仍存在于内存中（WeakRef.deref()不会返回undefined），尽管它们内部已经被Vue标记为_isDestroyed。

具体排查步骤 #

1. 修复事件回调的上下文绑定问题 #

你当前使用的vue-turbolinks版本中，turbolinks:visit的事件回调没有绑定正确的this指向，普通函数作为事件回调时this指向document对象而非Vue实例，会导致两个核心问题：

• 回调内的this.$destroy()根本没有作用到Vue实例上，实例从未被正确执行销毁逻辑
• 回调函数的闭包持有了外层Vue实例的引用，而回调本身被document的事件监听器持有，导致实例永远无法被垃圾回收
  修复方案：将function teardown()改为箭头函数，或者手动调用.bind(this)绑定Vue实例上下文。

2. 排查组件内部未清理的异步/第三方引用 #

• 检查所有Vue组件内的定时器（setTimeout/setInterval）、异步请求回调，确认都在beforeDestroy钩子中做了清理/取消操作
• 排查是否有图表、富文本编辑器等第三方库的实例被Vue实例持有，且未在销毁钩子中调用对应库的销毁/卸载方法

3. 通过浏览器堆快照定位引用链 #

打开Chrome DevTools的Memory标签，执行两次页面导航后手动点击垃圾回收按钮，再拍摄堆快照：

• 在快照的过滤器中输入Vue，筛选出所有Vue实例
• 找到标记为_isDestroyed: true的已销毁实例
• 查看实例的Retainers面板，就能直接看到是哪个对象持有了该实例的引用，顺着引用链即可精准定位泄漏源

4. 排查DOM节点引用泄漏 #

确认this.$el.outerHTML = this.$cachedHTML执行时，没有其他事件监听器、第三方库或者Vue子组件仍持有旧的$el节点的引用，导致旧DOM节点无法被回收，连带持有关联的Vue实例引用。

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