diff --git a/src/reactivity/unwrap.ts b/src/reactivity/unwrap.ts index e7f591fe..611e178c 100644 --- a/src/reactivity/unwrap.ts +++ b/src/reactivity/unwrap.ts @@ -1,6 +1,6 @@ import { isRef } from './ref' import { proxy, isFunction, isPlainObject, isArray } from '../utils' -import { isReactive } from './reactive' +import { isReactive, isRaw } from './reactive' export function unwrapRefProxy(value: any, map = new WeakMap()) { if (map.has(value)) { @@ -13,7 +13,8 @@ export function unwrapRefProxy(value: any, map = new WeakMap()) { isReactive(value) || !isPlainObject(value) || !Object.isExtensible(value) || - isRef(value) + isRef(value) || + isRaw(value) ) { return value } @@ -28,8 +29,12 @@ export function unwrapRefProxy(value: any, map = new WeakMap()) { for (const k of Object.keys(value)) { const r = value[k] + // don't process on falsy or raw + if (!r || isRaw(r)) { + obj[k] = r + } // if is a ref, create a proxy to retrieve the value, - if (isRef(r)) { + else if (isRef(r)) { const set = (v: any) => (r.value = v) const get = () => r.value diff --git a/test/setup.spec.js b/test/setup.spec.js index d11a0284..497f8bb6 100644 --- a/test/setup.spec.js +++ b/test/setup.spec.js @@ -7,6 +7,7 @@ const { inject, reactive, toRefs, + markRaw, } = require('../src') describe('setup', () => { @@ -622,6 +623,30 @@ describe('setup', () => { vm.$el.querySelector('#recursive_b_recursive_recursive_r').textContent ).toBe('r') }) + + // #384 + it('not unwrap when is raw', () => { + const vm = new Vue({ + setup() { + const xx = { + ref: ref('r'), + } + const r = markRaw(xx) + return { + r, + } + }, + template: `
+

{{r}}

+
`, + }).$mount() + + expect(JSON.parse(vm.$el.querySelector('#r').textContent)).toMatchObject({ + ref: { + value: 'r', + }, + }) + }) }) it('should not unwrap built-in objects on the template', () => {