disable fragment reactivity during removal (fix vuejs#2100)

yyx990803 · yyx990803 · commit 52e8638ec7c6 · 2015-12-31T16:03:00.000-05:00
diff --git a/src/compiler/compile.js b/src/compiler/compile.js
@@ -138,12 +138,15 @@ function directiveComparator (a, b) {
  */
 
 function makeUnlinkFn (vm, dirs, context, contextDirs) {
-  return function unlink (destroying) {
+  function unlink (destroying) {
     teardownDirs(vm, dirs, destroying)
     if (context && contextDirs) {
       teardownDirs(context, contextDirs)
     }
   }
+  // expose linked directives
+  unlink.dirs = dirs
+  return unlink
 }
 
 /**
diff --git a/src/fragment/fragment.js b/src/fragment/fragment.js
@@ -72,17 +72,6 @@ Fragment.prototype.callHook = function (hook) {
   }
 }
 
-/**
- * Destroy the fragment.
- */
-
-Fragment.prototype.destroy = function () {
-  if (this.parentFrag) {
-    this.parentFrag.childFrags.$remove(this)
-  }
-  this.unlink()
-}
-
 /**
  * Insert fragment before target, single node version
  *
@@ -109,7 +98,7 @@ function singleRemove () {
   this.inserted = false
   var shouldCallRemove = inDoc(this.node)
   var self = this
-  self.callHook(destroyChild)
+  this.beforeRemove()
   removeWithTransition(this.node, this.vm, function () {
     if (shouldCallRemove) {
       self.callHook(detach)
@@ -147,7 +136,7 @@ function multiRemove () {
   this.inserted = false
   var self = this
   var shouldCallRemove = inDoc(this.node)
-  self.callHook(destroyChild)
+  this.beforeRemove()
   removeNodeRange(this.node, this.end, this.vm, this.frag, function () {
     if (shouldCallRemove) {
       self.callHook(detach)
@@ -156,6 +145,33 @@ function multiRemove () {
   })
 }
 
+/**
+ * Prepare the fragment for removal.
+ * Most importantly, disable the watchers on all the
+ * directives so that the rendered content stays the same
+ * during removal.
+ */
+
+Fragment.prototype.beforeRemove = function () {
+  this.callHook(destroyChild)
+  var dirs = this.unlink.dirs
+  var i = dirs.length
+  while (i--) {
+    dirs[i]._watcher && dirs[i]._watcher.teardown()
+  }
+}
+
+/**
+ * Destroy the fragment.
+ */
+
+Fragment.prototype.destroy = function () {
+  if (this.parentFrag) {
+    this.parentFrag.childFrags.$remove(this)
+  }
+  this.unlink()
+}
+
 /**
  * Call attach hook for a Vue instance.
  *

Original file line number	Diff line number	Diff line change
`@@ -138,12 +138,15 @@ function directiveComparator (a, b) {`
`138`	`138`	`*/`
`139`	`139`
`140`	`140`	`function makeUnlinkFn (vm, dirs, context, contextDirs) {`
`141`		`- return function unlink (destroying) {`
	`141`	`+ function unlink (destroying) {`
`142`	`142`	`teardownDirs(vm, dirs, destroying)`
`143`	`143`	`if (context && contextDirs) {`
`144`	`144`	`teardownDirs(context, contextDirs)`
`145`	`145`	`}`
`146`	`146`	`}`
	`147`	`+ // expose linked directives`
	`148`	`+ unlink.dirs = dirs`
	`149`	`+ return unlink`
`147`	`150`	`}`
`148`	`151`
`149`	`152`	`/**`