optimize single-node fragment

src/directives/component.js

@@ -18,9 +18,6 @@ module.exports = {
 
   bind: function () {
     if (!this.el.__vue__) {
-      // create a ref anchor
-      this.anchor = _.createAnchor('v-component')
-      _.replace(this.el, this.anchor)
       // check keep-alive options.
       // If yes, instead of destroying the active vm when
       // hiding (v-if) or switching (dynamic literal) it,
@@ -57,6 +54,9 @@ module.exports = {
         this.resolveComponent(this.expression, _.bind(this.initStatic, this))
       } else {
         // check dynamic component params
+        // create a ref anchor
+        this.anchor = _.createAnchor('v-component')
+        _.replace(this.el, this.anchor)
         this.transMode = this._checkParam('transition-mode')
       }
     } else {
@@ -73,7 +73,7 @@ module.exports = {
 
   initStatic: function () {
     // wait-for
-    var anchor = this.anchor
+    var anchor = this.el
     var options
     var waitFor = this.waitForEvent
     if (waitFor) {
@@ -81,6 +81,7 @@ module.exports = {
         created: function () {
           this.$once(waitFor, function () {
             this.$before(anchor)
+            _.remove(anchor)
           })
         }
       }
@@ -89,6 +90,7 @@ module.exports = {
     this.setCurrent(child)
     if (!this.waitForEvent) {
       child.$before(anchor)
+      _.remove(anchor)
     }
   },
 

src/directives/for.js

@@ -9,8 +9,8 @@ module.exports = {
       this.arg = inMatch[1]
       this._watcherExp = inMatch[2]
     }
-    this.start = _.createAnchor('fast-repeat-start')
-    this.end = _.createAnchor('fast-repeat-end')
+    this.start = _.createAnchor('v-for-start')
+    this.end = _.createAnchor('v-for-end')
     _.replace(this.el, this.end)
     _.before(this.start, this.end)
     // fragment factory

src/fragment/fragment.js

@@ -1,19 +1,81 @@
 var _ = require('../util')
 
-function Fragment (el, unlink) {
+/**
+ * Exposed constructor that returns different fragment type
+ * based on fragment childNodes length.
+ *
+ * @param {DocumentFragment} frag
+ * @param {Function} unlink
+ */
+
+function Fragment (frag, unlink) {
+  return frag.childNodes.length > 1
+    ? new MultiFragment(frag, unlink)
+    : new SingleFragment(frag.childNodes[0], unlink)
+}
+
+/**
+ * Single-node fragment, optimize insertion/removal for
+ * single-node repeats.
+ *
+ * @param {Node} node
+ * @param {Function} unlink
+ */
+
+function SingleFragment (node, unlink) {
+  this.node = node
+  this.unlink = unlink
+}
+
+/**
+ * Insert fragment before target.
+ *
+ * @param {Node} target
+ */
+
+SingleFragment.prototype.before = function (target) {
+  _.before(this.node, target)
+}
+
+/**
+ * Remove fragment.
+ */
+
+SingleFragment.prototype.remove = function () {
+  _.remove(this.node)
+}
+
+/**
+ * Multi-node fragment that has a start and an end node.
+ *
+ * @param {Node} node
+ * @param {Function} unlink
+ */
+
+function MultiFragment (frag, unlink) {
   this.start = _.createAnchor('fragment')
   this.end = _.createAnchor('fragment')
-  this.frag = el
+  this.frag = frag
   this.unlink = unlink
 }
 
-Fragment.prototype.before = function (target) {
+/**
+ * Insert fragment before target.
+ *
+ * @param {Node} target
+ */
+
+MultiFragment.prototype.before = function (target) {
   _.before(this.start, target)
   _.before(this.frag, target)
   _.before(this.end, target)
 }
 
-Fragment.prototype.remove = function () {
+/**
+ * Remove fragment.
+ */
+
+MultiFragment.prototype.remove = function () {
   var parent = this.start.parentNode
   var node = this.start.nextSibling
   while (node !== this.end) {
@@ -23,7 +85,12 @@ Fragment.prototype.remove = function () {
   parent.removeChild(this.end)
 }
 
-Fragment.prototype.destroy = function () {
+/**
+ * Shared destroy method
+ */
+
+MultiFragment.prototype.destroy =
+SingleFragment.prototype.destroy = function () {
   this.remove()
   this.unlink()
 }