为什么未分配的 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.[=16= 中简要暗示的那样]

通过在浏览器中使用开发人员工具，就像在 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。有一篇关于在 Vue 应用程序中处理垃圾收集的详细文档文章 Avoiding Memory Leaks。

Answer 2

Vue 应用程序由一个 Vue 实例组成，该实例使用新 Vue 创建并安装在 ID 为“#root”的 DOM 元素中。 Vue 是运行幕后的所有魔法，这就是垃圾收集器不会收集 Vue 对象的原因。

除了数据属性之外，Vue 实例还公开了许多实例属性和方法。这些以 $ 为前缀，以区别于用户定义的属性。例如：

var data = { title: 'Hello' }
var vm = new Vue({ 
    el: '#root',
    data: data
});
// If you check below code
vm.$data === data // => true
vm.$el === document.getElementById('root') // => true

为什么未分配的 Vue 实例没有被垃圾收集？

Why doesn't an unassigned Vue instance get garbage collected?

javascript

garbage-collection

vue.js