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

Question

这是在 HTML 页面上使用 VueJS 的标准方法(没有捆绑包)。没有任务。

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

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

Answer 1

当你实例化一个 Vue 对象时，它实际上将自己挂载到 DOM 元素上，这里是 #root元素，如本文档页面 The Vue Instance > Instance Lifecycle Hooks 中的简要提示.
通过在浏览器中使用开发人员工具，例如在 Chrome 中，您可以打开控制台选项卡并提示，输入 console.log(window.$vm0);然后按回车。即使它没有分配给变量，您也可以访问您的 Vue 运行时实例:

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

我在 how to properly access the Vue instance if it wasn't assigned to a variable during instantiation 上打开了另一个问题.
作为对当前问题的回答，要点是实际上 Vue 本身在幕后发生了变量分配/DOM 安装，这就是垃圾收集没有触发的原因。
PS。有详细的文档文章 Avoiding Memory Leaks关于在 Vue 应用程序中处理垃圾收集。