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);，然后按Enter。即使没有将其分配给变量，您也可以访问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实例不收集垃圾？

2 个答案: