fix(toRefs): do not warn when toRefs is called in a prop value (#405)

* fix(toRefs): do not warn when toRefs is called in a prop value * chore: comments * Update test/setup.spec.js Co-authored-by: Anthony Fu <[email protected]> Co-authored-by: Anthony Fu <[email protected]>
vuejs · Jun 24, 2020 · 048b6d3 · 048b6d3
1 parent d70c904
commit 048b6d3
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 1 deletion.
diff --git a/src/setup.ts b/src/setup.ts
@@ -220,8 +220,12 @@ export function mixin(Vue: VueConstructor) {
             if (isFunction(bindingValue)) {
               bindingValue = bindingValue.bind(vm)
             }
+            // unwrap all ref properties
+            const unwrapped = unwrapRefProxy(bindingValue)
+            // mark the object as reactive
+            markReactive(unwrapped)
             // a non-reactive should not don't get reactivity
-            bindingValue = ref(markRaw(unwrapRefProxy(bindingValue)))
+            bindingValue = ref(markRaw(unwrapped))
           }
         }
         asVmProperty(vm, name, bindingValue)

diff --git a/test/setup.spec.js b/test/setup.spec.js
@@ -176,6 +176,55 @@ describe('setup', () => {
     )
   })
 
+  it('not warn doing toRef on props', async () => {
+    const Foo = {
+      props: {
+        obj: {
+          type: Object,
+          required: true,
+        },
+      },
+      setup(props) {
+        return () =>
+          h('div', null, [
+            h('span', toRefs(props.obj).bar.value),
+            h('span', toRefs(props.obj.nested).baz.value),
+          ])
+      },
+    }
+
+    let bar
+    let baz
+
+    const vm = new Vue({
+      template: `<div id="app"><Foo :obj="obj" /></div>`,
+      components: { Foo },
+      setup() {
+        bar = ref(3)
+        baz = ref(1)
+        return {
+          obj: {
+            bar,
+            nested: {
+              baz,
+            },
+          },
+        }
+      },
+    })
+    vm.$mount()
+
+    expect(warn).not.toHaveBeenCalled()
+    expect(vm.$el.textContent).toBe('31')
+
+    bar.value = 4
+    baz.value = 2
+
+    await vm.$nextTick()
+    expect(warn).not.toHaveBeenCalled()
+    expect(vm.$el.textContent).toBe('42')
+  })
+
   it('should merge result properly', () => {
     const injectKey = Symbol('foo')
     const A = Vue.extend({