Vue实例变量被重赋值为数字后，原有实例属性为何未在浏览器消失？

你观测到的结果是Vue实例挂载逻辑、JavaScript垃圾回收机制、浏览器渲染规则三者共同作用的结果，核心原因如下：

• 实例挂载后存在多份独立引用
  当你执行new Vue({el: "#test"})完成实例初始化时，Vue会在内部维护多份指向该实例的引用：包括实例与DOM节点的绑定关系、响应式依赖收集列表、事件监听关联关系等，这些引用完全独立于你自定义的变量r，不会随r的赋值改变而消失。
• JavaScript垃圾回收仅清理无引用的对象
  你执行r = 4仅切断了r这一个变量对Vue实例的指向，但是Vue内部维护的引用、DOM节点关联的实例引用仍然存活，该Vue实例完全不满足垃圾回收的条件，因此实例的data、methods等所有属性都会完整保留。
• 已渲染的DOM不会随实例引用消失自动清除
  浏览器渲染完成的DOM节点是独立于JS变量存在的渲染树节点，哪怕后续Vue实例真的被垃圾回收，已经渲染到页面上的静态内容也不会自动消失，除非你主动删除对应DOM节点，或者调用实例的销毁方法清理关联内容。

如果需要主动清除实例及对应内容，可以按如下逻辑操作：

// 销毁Vue实例，解绑所有响应式监听、事件绑定
r.$destroy()
// 移除页面上的对应DOM节点
document.querySelector('#test').remove()
// 再修改变量赋值
r = 4

内容的提问来源于stack exchange，提问作者serhani ahmed saned