disable fragment reactivity during removal (fix vuejs#2100)

junxtx · Dec 31, 2015 · 52e8638 · 52e8638
1 parent 702b173
commit 52e8638
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 14 deletions.
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.
  *