fix the wrong orders of call 'detached' and 'destroyed' hook - #3870

src/fragment/fragment.js

@@ -144,6 +144,7 @@ function multiRemove () {
     }
     self.destroy()
   })
+  this.afterRemove()
 }
 
 /**
@@ -157,6 +158,22 @@ Fragment.prototype.beforeRemove = function () {
     // fragments, depth-first
     this.childFrags[i].beforeRemove(false)
   }
+
+  var dirs = this.unlink.dirs
+  for (i = 0, l = dirs.length; i < l; i++) {
+    // disable the watchers on all the directives
+    // so that the rendered content stays the same
+    // during removal.
+    dirs[i]._watcher && dirs[i]._watcher.teardown()
+  }
+}
+
+/**
+ * ensure destroyed after detached.
+ */
+
+Fragment.prototype.afterRemove = function () {
+  var i, l
   for (i = 0, l = this.children.length; i < l; i++) {
     // Call destroy for all contained instances,
     // with remove:false and defer:true.
@@ -165,13 +182,6 @@ Fragment.prototype.beforeRemove = function () {
     // on them.
     this.children[i].$destroy(false, true)
   }
-  var dirs = this.unlink.dirs
-  for (i = 0, l = dirs.length; i < l; i++) {
-    // disable the watchers on all the directives
-    // so that the rendered content stays the same
-    // during removal.
-    dirs[i]._watcher && dirs[i]._watcher.teardown()
-  }
 }
 
 /**

test/unit/specs/instance/events_spec.js

@@ -315,6 +315,48 @@ describe('Instance Events', function () {
         expect(spy2.calls.count()).toBe(2)
       })
 
+      // Github issues #3870
+      it('detached then destroyed', function (done) {
+        var el = document.createElement('div')
+        document.body.appendChild(el) // for inDoc.
+        var vm = new Vue({
+          el: el,
+          template: '<div><mod v-if="show"></mod></div>',
+          data: {
+            show: false
+          },
+          components: {
+            mod: {
+              template: '<div><comp></comp></div>',
+              components: {
+                comp: {
+                  template: '<div>123</div>',
+                  detached: function () {
+                    spy()
+                    expect(spy2).not.toHaveBeenCalled()
+                  },
+                  destroyed: function () {
+                    spy2()
+                    expect(spy).toHaveBeenCalled()
+                  }
+                }
+              }
+            }
+          }
+        })
+        _.nextTick(function () {
+          vm.show = true
+          _.nextTick(function () {
+            vm.show = false
+            _.nextTick(function () {
+              expect(spy).toHaveBeenCalled()
+              expect(spy2).toHaveBeenCalled()
+              done()
+            })
+          })
+        })
+      })
+
       it('should not fire on detached child', function () {
         var el = document.createElement('div')
         var childEl = document.createElement('div')