diff --git a/src/setup.ts b/src/setup.ts index b1a40ae2..ac3b73f2 100644 --- 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 index 497f8bb6..92a770ea 100644 --- 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: `
`, + 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({