feat(reactivity): return array when calling toRefs on array (#1768)

close #1764

Author: thecrypticace

packages/reactivity/__tests__/ref.spec.ts

@@ -266,12 +266,29 @@ describe('reactivity/ref', () => {
     expect(dummyY).toBe(5)
   })
 
-  test('toRefs pass a reactivity object', () => {
-    console.warn = jest.fn()
-    const obj = { x: 1 }
-    toRefs(obj)
-    expect(console.warn).toBeCalled()
+  test('toRefs should warn on plain object', () => {
+    toRefs({})
+    expect(`toRefs() expects a reactive object`).toHaveBeenWarned()
   })
+
+  test('toRefs should warn on plain array', () => {
+    toRefs([])
+    expect(`toRefs() expects a reactive object`).toHaveBeenWarned()
+  })
+
+  test('toRefs reactive array', () => {
+    const arr = reactive(['a', 'b', 'c'])
+    const refs = toRefs(arr)
+    
+    expect(Array.isArray(refs)).toBe(true)
+    
+    refs[0].value = '1'
+    expect(arr[0]).toBe('1')
+    
+    arr[1] = '2'
+    expect(refs[1].value).toBe('2')
+  })
+
   test('customRef', () => {
     let value = 1
     let _trigger: () => void

packages/reactivity/src/ref.ts

@@ -1,6 +1,6 @@
 import { track, trigger } from './effect'
 import { TrackOpTypes, TriggerOpTypes } from './operations'
-import { isObject, hasChanged } from '@vue/shared'
+import { isArray, isObject, hasChanged } from '@vue/shared'
 import { reactive, isProxy, toRaw, isReactive } from './reactive'
 import { CollectionTypes } from './collectionHandlers'
 
@@ -121,7 +121,7 @@ export function toRefs<T extends object>(object: T): ToRefs<T> {
   if (__DEV__ && !isProxy(object)) {
     console.warn(`toRefs() expects a reactive object but received a plain one.`)
   }
-  const ret: any = {}
+  const ret: any = isArray(object) ? new Array(object.length) : {}
   for (const key in object) {
     ret[key] = toRef(object, key)
   }