vm.$destroy() 只能销毁实例里的方法但不能清除DOM和data吗？

Question

例如

var vm=new Vue{
    //something
}

vm.destroy()并不能清除已有的页面上的DOM，甚至可以获取到vm.$data,请问如何才能完全销毁呢

Answer 1

$destroy只是完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。

参见 https://cn.vuejs.org/v2/api/#...

它并不是用来清除已有页面上的DOM的。

包括Watcher对象从其所在Dep中释放

if (vm._watcher) {
  vm._watcher.teardown()
}
let i = vm._watchers.length
while (i--) {
  vm._watchers[i].teardown()
}
// remove reference from data ob
// frozen object may not have observer.
if (vm._data.__ob__) {
  vm._data.__ob__.vmCount--
}

移除所有事件的监听

vm.$off()

patch一个null目的是触发所有的destroy钩子。

vm.__patch__(vm._vnode, null)

return function patch (oldVnode, vnode, hydrating, removeOnly, parentElm, refElm) {
    /*vnode不存在则直接调用销毁钩子*/
    if (isUndef(vnode)) {
      if (isDef(oldVnode)) invokeDestroyHook(oldVnode)
      return
    }
    ...
 }

Answer 2

补充一点：想要清除页面的 DOM，需要使用 v-if，或者修改 v-for 中涉及到的数组或对象

https://cn.vuejs.org/v2/api/#...

另外，调用 app.$destroy() 之后，你会发现，app.message = 'Yes, he is a boy.' 不会对页面产生影响。