Allow named properties on reactive arrays. (vuejs#5216)

pkaminski · yyx990803 · commit e47b1e5c4d16 · 2017-03-23T15:12:30.000+08:00
* Allow named properties on reactive arrays. * Remove semicolons to comport with style guide. * Pacify flow type checking. Without the cast to any, flow complains that Array doesn't have an __ob__ property. This appears to be an instance of this issue: facebook/flow#1330
diff --git a/src/core/observer/index.js b/src/core/observer/index.js
@@ -189,7 +189,7 @@ export function defineReactive (
  * already exist.
  */
 export function set (target: Array<any> | Object, key: any, val: any): any {
-  if (Array.isArray(target)) {
+  if (Array.isArray(target) && typeof key === 'number') {
     target.length = Math.max(target.length, key)
     target.splice(key, 1, val)
     return val
@@ -198,7 +198,7 @@ export function set (target: Array<any> | Object, key: any, val: any): any {
     target[key] = val
     return val
   }
-  const ob = target.__ob__
+  const ob = (target : any).__ob__
   if (target._isVue || (ob && ob.vmCount)) {
     process.env.NODE_ENV !== 'production' && warn(
       'Avoid adding reactive properties to a Vue instance or its root $data ' +
@@ -219,11 +219,11 @@ export function set (target: Array<any> | Object, key: any, val: any): any {
  * Delete a property and trigger change if necessary.
  */
 export function del (target: Array<any> | Object, key: any) {
-  if (Array.isArray(target)) {
+  if (Array.isArray(target) && typeof key === 'number') {
     target.splice(key, 1)
     return
   }
-  const ob = target.__ob__
+  const ob = (target : any).__ob__
   if (target._isVue || (ob && ob.vmCount)) {
     process.env.NODE_ENV !== 'production' && warn(
       'Avoid deleting properties on a Vue instance or its root $data ' +
diff --git a/test/unit/modules/observer/observer.spec.js b/test/unit/modules/observer/observer.spec.js
@@ -284,6 +284,17 @@ describe('Observer', () => {
     delProp(obj3, 'a')
     expect(hasOwn(obj3, 'a')).toBe(false)
     expect(dep3.notify.calls.count()).toBe(2)
+    // set and delete non-numeric key on array
+    const arr2 = ['a']
+    const ob2 = observe(arr2)
+    const dep2 = ob2.dep
+    spyOn(dep2, 'notify')
+    setProp(arr2, 'b', 2)
+    expect(arr2.b).toBe(2)
+    expect(dep2.notify.calls.count()).toBe(1)
+    delProp(arr2, 'b')
+    expect(hasOwn(arr2, 'b')).toBe(false)
+    expect(dep2.notify.calls.count()).toBe(2)
   })
 
   it('warning set/delete on a Vue instance', done => {
