v-repeat optimization

- When the array is swapped, will reuse existing VM for any
  element present in the old array. This greatly improves
  performance when the repeated VMs have a complicated
  nested structure themselves.
- Fixed issue when array is swapped new length is not emitted
- Fixed v-if not removing its reference comment node when unbound
- Fixed transition when element is invisible the transitionend
  callback is never fired resulting in element stuck in DOM

Author: yyx990803

src/directives/if.js

@@ -53,5 +53,9 @@ module.exports = {
 
     unbind: function () {
         this.el.vue_ref = null
+        var ref = this.ref
+        if (ref.parentNode) {
+            ref.parentNode.removeChild(ref)
+        }
     }
 }

src/directives/repeat.js

@@ -132,6 +132,12 @@ module.exports = {
             this.buildItem()
             this.initiated = true
         }
+
+        // keep reference of old data and VMs
+        // so we can reuse them if possible
+        this.old = this.collection
+        var oldVMs = this.oldVMs = this.vms
+
         collection = this.collection = collection || []
         this.vms = []
         if (this.childId) {
@@ -143,11 +149,25 @@ module.exports = {
         if (!collection.__observer__) Observer.watchArray(collection)
         collection.__observer__.on('mutate', this.mutationListener)
 
-        // create child-vms and append to DOM
+        // create new VMs and append to DOM
         if (collection.length) {
             collection.forEach(this.buildItem, this)
             if (!init) this.changed()
         }
+
+        // destroy unused old VMs
+        if (oldVMs) {
+            var i = oldVMs.length, vm
+            while (i--) {
+                vm = oldVMs[i]
+                if (vm.$reused) {
+                    vm.$reused = false
+                } else {
+                    vm.$destroy()
+                }
+            }
+        }
+        this.old = this.oldVMs = null
     },
 
     /**
@@ -174,33 +194,58 @@ module.exports = {
      */
     buildItem: function (data, index) {
 
-        var el  = this.el.cloneNode(true),
-            ctn = this.container,
+        var ctn = this.container,
             vms = this.vms,
             col = this.collection,
-            ref, item, primitive
+            el, i, ref, item, primitive, noInsert
 
         // append node into DOM first
         // so v-if can get access to parentNode
         if (data) {
+
+            if (this.old) {
+                i = this.old.indexOf(data)
+            }
+            
+            if (i > -1) { // existing, reuse the old VM
+
+                item = this.oldVMs[i]
+                // mark, so it won't be destroyed
+                item.$reused = true
+                el = item.$el
+                // don't forget to update index
+                data.$index = index
+                // existing VM's el can possibly be detached by v-if.
+                // in that case don't insert.
+                noInsert = !el.parentNode
+
+            } else { // new data, need to create new VM
+
+                el = this.el.cloneNode(true)
+                // process transition info before appending
+                el.vue_trans = utils.attr(el, 'transition', true)
+                // wrap primitive element in an object
+                if (utils.typeOf(data) !== 'Object') {
+                    primitive = true
+                    data = { value: data }
+                }
+
+            }
+
             ref = vms.length > index
                 ? vms[index].$el
                 : this.ref
             // make sure it works with v-if
             if (!ref.parentNode) ref = ref.vue_ref
-            // process transition info before appending
-            el.vue_trans = utils.attr(el, 'transition', true)
-            transition(el, 1, function () {
-                ctn.insertBefore(el, ref)
-            }, this.compiler)
-            // wrap primitive element in an object
-            if (utils.typeOf(data) !== 'Object') {
-                primitive = true
-                data = { value: data }
+            // insert node with transition
+            if (!noInsert) {
+                transition(el, 1, function () {
+                    ctn.insertBefore(el, ref)
+                }, this.compiler)
             }
         }
 
-        item = new this.Ctor({
+        item = item || new this.Ctor({
             el: el,
             data: data,
             compilerOptions: {
@@ -228,15 +273,17 @@ module.exports = {
         }
     },
 
-    reset: function () {
+    reset: function (destroyAll) {
         if (this.childId) {
             delete this.vm.$[this.childId]
         }
         if (this.collection) {
             this.collection.__observer__.off('mutate', this.mutationListener)
-            var i = this.vms.length
-            while (i--) {
-                this.vms[i].$destroy()
+            if (destroyAll) {
+                var i = this.vms.length
+                while (i--) {
+                    this.vms[i].$destroy()
+                }
             }
         }
         var ctn = this.container,
@@ -248,6 +295,6 @@ module.exports = {
     },
 
     unbind: function () {
-        this.reset()
+        this.reset(true)
     }
 }

src/observer.js

@@ -138,12 +138,10 @@ function convert (obj, key) {
     // this means when an object is observed it will emit
     // a first batch of set events.
     var observer = obj.__observer__,
-        values   = observer.values,
-        val      = values[key] = obj[key]
-    observer.emit('set', key, val)
-    if (Array.isArray(val)) {
-        observer.emit('set', key + '.length', val.length)
-    }
+        values   = observer.values
+
+    init(obj[key])
+
     Object.defineProperty(obj, key, {
         get: function () {
             var value = values[key]
@@ -156,15 +154,21 @@ function convert (obj, key) {
         set: function (newVal) {
             var oldVal = values[key]
             unobserve(oldVal, key, observer)
-            values[key] = newVal
             copyPaths(newVal, oldVal)
             // an immediate property should notify its parent
             // to emit set for itself too
-            observer.emit('set', key, newVal, true)
-            observe(newVal, key, observer)
+            init(newVal, true)
         }
     })
-    observe(val, key, observer)
+
+    function init (val, propagate) {
+        values[key] = val
+        observer.emit('set', key, val, propagate)
+        if (Array.isArray(val)) {
+            observer.emit('set', key + '.length', val.length)
+        }
+        observe(val, key, observer)
+    }
 }
 
 /**

src/transition.js

@@ -92,20 +92,25 @@ function applyTransitionClass (el, stage, changeState) {
 
     } else { // leave
 
-        // trigger hide transition
-        classList.add(config.leaveClass)
-        var onEnd = function (e) {
-            if (e.target === el) {
-                el.removeEventListener(endEvent, onEnd)
-                el.vue_trans_cb = null
-                // actually remove node here
-                changeState()
-                classList.remove(config.leaveClass)
+        if (el.offsetWidth || el.offsetHeight) {
+            // trigger hide transition
+            classList.add(config.leaveClass)
+            var onEnd = function (e) {
+                if (e.target === el) {
+                    el.removeEventListener(endEvent, onEnd)
+                    el.vue_trans_cb = null
+                    // actually remove node here
+                    changeState()
+                    classList.remove(config.leaveClass)
+                }
             }
+            // attach transition end listener
+            el.addEventListener(endEvent, onEnd)
+            el.vue_trans_cb = onEnd
+        } else {
+            // directly remove invisible elements
+            changeState()
         }
-        // attach transition end listener
-        el.addEventListener(endEvent, onEnd)
-        el.vue_trans_cb = onEnd
         return codes.CSS_L
 
     }

test/functional/fixtures/repeated-items.html

@@ -12,7 +12,7 @@
     </p>
     <p>Total items: <span class="count" v-text="items.length"></span></p>
     <ul>
-        <li class="item" v-repeat="items">
+        <li class="item" v-repeat="items" v-ref="items">
             {{$index}} {{title}}
         </li>
     </ul>

test/functional/specs/repeated-items.js

@@ -1,4 +1,6 @@
-casper.test.begin('Repeated Items', 41, function (test) {
+/* global demo */
+
+casper.test.begin('Repeated Items', 50, function (test) {
 
     casper
     .start('./fixtures/repeated-items.html')
@@ -81,6 +83,37 @@ casper.test.begin('Repeated Items', 41, function (test) {
         test.assertSelectorHasText('.item:nth-child(1)', '0 6')
         test.assertSelectorHasText('.item:nth-child(2)', '1 7')
     })
+    // test swap entire array
+    .thenEvaluate(function () {
+        demo.items = [{title:'A'}, {title:'B'}, {title:'C'}]
+    })
+    .then(function () {
+        test.assertSelectorHasText('.count', '3')
+        test.assertSelectorHasText('.item:nth-child(1)', '0 A')
+        test.assertSelectorHasText('.item:nth-child(2)', '1 B')
+        test.assertSelectorHasText('.item:nth-child(3)', '2 C')
+    })
+    // test swap array with old elements
+    // should reuse existing VMs!
+    .thenEvaluate(function () {
+        window.oldVMs = demo.$.items
+        demo.items = [demo.items[2],demo.items[1],demo.items[0]]
+    })
+    .then(function () {
+        test.assertSelectorHasText('.count', '3')
+        test.assertSelectorHasText('.item:nth-child(1)', '0 C')
+        test.assertSelectorHasText('.item:nth-child(2)', '1 B')
+        test.assertSelectorHasText('.item:nth-child(3)', '2 A')
+        test.assertEval(function () {
+            var i = window.oldVMs.length
+            while (i--) {
+                if (window.oldVMs[i] !== demo.$.items[2 - i]) {
+                    return false
+                }
+            }
+            return true
+        })
+    })
     .run(function () {
         test.done()
     })

test/functional/specs/transition.js

@@ -1,4 +1,4 @@
-casper.test.begin('Transition', 23, function (test) {
+casper.test.begin('Transition', 25, function (test) {
 
     var minWait = 50,
         transDuration = 200
@@ -50,9 +50,17 @@ casper.test.begin('Transition', 23, function (test) {
     })
     .thenClick('.splice')
     .wait(minWait, function () {
-        test.assertElementCount('.test', 4)
+        test.assertElementCount('.test', 3)
         test.assertVisible('.test[data-id="99"]')
     })
+    // test Array swapping with transition
+    .thenEvaluate(function () {
+        test.items = [test.items[1], {a:3}]
+    })
+    .wait(transDuration + minWait, function () {
+        test.assertElementCount('.test', 3)
+        test.assertVisible('.test[data-id="3"]')
+    })
     .run(function () {
         test.done()
     })

test/unit/specs/transition.js

@@ -94,9 +94,24 @@ describe('UNIT: Transition', function () {
             var el = mockEl('css'),
                 c = mockChange(),
                 compiler = mockCompiler(),
+                code
+
+            before(function () {
+                document.body.appendChild(el)
+            })
+
+            it('should call change immediately if el is invisible', function () {
+                var el = mockEl('css'),
+                    c = mockChange(),
+                    compiler = mockCompiler()
                 code = transition(el, -1, c.change, compiler)
+                assert.ok(c.called)
+                assert.ok(compiler.detached)
+            })
 
             it('should attach an ontransitionend listener', function () {
+                el.style.width = '1px'
+                code = transition(el, -1, c.change, compiler)
                 assert.ok(typeof el.vue_trans_cb === 'function')
             })