handle single -> array & array -> single event handler patching (fix #4650)

Author: yyx990803

src/core/vdom/helpers/update-listeners.js

@@ -9,10 +9,12 @@ export function updateListeners (
   remove: Function,
   vm: Component
 ) {
-  let name, cur, old, fn, event, capture, once
+  let name, cur, old, curIsArray, oldIsArray, fn, event, capture, once
   for (name in on) {
     cur = on[name]
     old = oldOn[name]
+    curIsArray = Array.isArray(cur)
+    oldIsArray = Array.isArray(old)
     if (!cur) {
       process.env.NODE_ENV !== 'production' && warn(
         `Invalid handler for event "${name}": got ` + String(cur),
@@ -23,7 +25,7 @@ export function updateListeners (
       event = once ? name.slice(1) : name
       capture = event.charAt(0) === '!'
       event = capture ? event.slice(1) : event
-      if (Array.isArray(cur)) {
+      if (curIsArray) {
         add(event, (cur.invoker = arrInvoker(cur)), once, capture)
       } else {
         if (!cur.invoker) {
@@ -35,7 +37,9 @@ export function updateListeners (
         add(event, cur.invoker, once, capture)
       }
     } else if (cur !== old) {
-      if (Array.isArray(old)) {
+      if (curIsArray || oldIsArray) {
+        if (!curIsArray) cur = [cur]
+        if (!oldIsArray) old = [old]
         old.length = cur.length
         for (let i = 0; i < old.length; i++) old[i] = cur[i]
         on[name] = old

test/unit/modules/vdom/modules/events.spec.js

@@ -5,41 +5,125 @@ describe('vdom events module', () => {
   it('should attach event handler to element', () => {
     const click = jasmine.createSpy()
     const vnode = new VNode('a', { on: { click }})
+
     const elm = patch(null, vnode)
     document.body.appendChild(elm)
     triggerEvent(elm, 'click')
     expect(click.calls.count()).toBe(1)
   })
 
-  it('should not attach new listener', () => {
+  it('should not duplicate the same listener', () => {
     const click = jasmine.createSpy()
     const vnode1 = new VNode('a', { on: { click }})
     const vnode2 = new VNode('a', { on: { click }})
-    patch(null, vnode1)
-    const elm = patch(vnode1, vnode2)
+
+    const elm = patch(null, vnode1)
+    patch(vnode1, vnode2)
     document.body.appendChild(elm)
     triggerEvent(elm, 'click')
     expect(click.calls.count()).toBe(1)
   })
 
-  it('should attach event handlers', () => {
+  it('should update different listener', () => {
+    const click = jasmine.createSpy()
+    const click2 = jasmine.createSpy()
+    const vnode1 = new VNode('a', { on: { click }})
+    const vnode2 = new VNode('a', { on: { click: click2 }})
+
+    const elm = patch(null, vnode1)
+    document.body.appendChild(elm)
+    triggerEvent(elm, 'click')
+    expect(click.calls.count()).toBe(1)
+    expect(click2.calls.count()).toBe(0)
+
+    patch(vnode1, vnode2)
+    triggerEvent(elm, 'click')
+    expect(click.calls.count()).toBe(1)
+    expect(click2.calls.count()).toBe(1)
+  })
+
+  it('should attach Array of multiple handlers', () => {
     const click = jasmine.createSpy()
     const vnode = new VNode('a', { on: { click: [click, click] }})
+
     const elm = patch(null, vnode)
     document.body.appendChild(elm)
     triggerEvent(elm, 'click')
     expect(click.calls.count()).toBe(2)
   })
 
-  it('should change attach event handlers', () => {
+  it('should update Array of multiple handlers', () => {
     const click = jasmine.createSpy()
-    const focus = jasmine.createSpy()
-    const vnode1 = new VNode('a', { on: { click: [click, focus] }})
+    const click2 = jasmine.createSpy()
+    const vnode1 = new VNode('a', { on: { click: [click, click2] }})
     const vnode2 = new VNode('a', { on: { click: [click] }})
-    patch(null, vnode1)
-    const elm = patch(vnode1, vnode2)
+
+    const elm = patch(null, vnode1)
+    document.body.appendChild(elm)
+    triggerEvent(elm, 'click')
+    expect(click.calls.count()).toBe(1)
+    expect(click2.calls.count()).toBe(1)
+
+    patch(vnode1, vnode2)
+    triggerEvent(elm, 'click')
+    expect(click.calls.count()).toBe(2)
+    expect(click2.calls.count()).toBe(1)
+  })
+
+  it('should remove handlers that are no longer present', () => {
+    const click = jasmine.createSpy()
+    const vnode1 = new VNode('a', { on: { click }})
+    const vnode2 = new VNode('a', {})
+
+    const elm = patch(null, vnode1)
     document.body.appendChild(elm)
     triggerEvent(elm, 'click')
     expect(click.calls.count()).toBe(1)
+
+    patch(vnode1, vnode2)
+    triggerEvent(elm, 'click')
+    expect(click.calls.count()).toBe(1)
+  })
+
+  it('should remove Array handlers that are no longer present', () => {
+    const click = jasmine.createSpy()
+    const vnode1 = new VNode('a', { on: { click: [click, click] }})
+    const vnode2 = new VNode('a', {})
+
+    const elm = patch(null, vnode1)
+    document.body.appendChild(elm)
+    triggerEvent(elm, 'click')
+    expect(click.calls.count()).toBe(2)
+
+    patch(vnode1, vnode2)
+    triggerEvent(elm, 'click')
+    expect(click.calls.count()).toBe(2)
+  })
+
+  // #4650
+  it('should handle single -> array or array -> single handler changes', () => {
+    const click = jasmine.createSpy()
+    const click2 = jasmine.createSpy()
+    const click3 = jasmine.createSpy()
+    const vnode1 = new VNode('a', { on: { click: [click, click2] }})
+    const vnode2 = new VNode('a', { on: { click: click }})
+    const vnode3 = new VNode('a', { on: { click: [click2, click3] }})
+
+    const elm = patch(null, vnode1)
+    document.body.appendChild(elm)
+    triggerEvent(elm, 'click')
+    expect(click.calls.count()).toBe(1)
+    expect(click2.calls.count()).toBe(1)
+
+    patch(vnode1, vnode2)
+    triggerEvent(elm, 'click')
+    expect(click.calls.count()).toBe(2)
+    expect(click2.calls.count()).toBe(1)
+
+    patch(vnode2, vnode3)
+    triggerEvent(elm, 'click')
+    expect(click.calls.count()).toBe(2)
+    expect(click2.calls.count()).toBe(2)
+    expect(click3.calls.count()).toBe(1)
   })
 })