为什么未分配的 Vue 实例不会被垃圾回收？

Question

这是在 HTML 页面上使用 VueJS 的标准方法（不带包）。没有任务。

<script>
new Vue({
  el: '#root',
  data: {
    title: 'Hello'
  }
});
</script>

为什么垃圾收集器不收集这个 Vue 对象？

Answer 1

当您实例化一个 Vue 对象时，它实际上将自身挂载到 DOM 元素，这里是#rootelement，如本文档页面The Vue Instance > Instance Lifecycle Hooks 中简要提示的那样。

通过在浏览器中使用开发人员工具，就像在 Chrome 中一样，您可以打开控制台选项卡并提示、键入 console.log(window.$vm0);并按 Enter。你可以访问你的 Vue 运行时实例，即使它没有被分配给一个变量：

> Vue {_uid: 2, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: Vue, …}

如果在实例化期间未将 Vue 实例分配给变量，我已经提出了关于如何正确访问 Vue 实例的另一个问题。

作为对当前问题的回答，主要观点是 Vue 本身实际上在幕后发生了变量赋值/DOM 挂载，因此这就是不触发垃圾收集的原因。

附注。有一篇关于在 Vue 应用程序中处理垃圾收集的详细文档文章避免内存泄漏。