fix: not unwrapping markRaw objects (#386)

* fix: not unwrapping `markRaw` objects * chore: add falsy check
vuejs · Jun 19, 2020 · 575d100 · 575d100
1 parent ce932bf
commit 575d100
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 3 deletions.
diff --git 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
@@ -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: `<div>
+          <p id="r">{{r}}</p>
+        </div>`,
+      }).$mount()
+
+      expect(JSON.parse(vm.$el.querySelector('#r').textContent)).toMatchObject({
+        ref: {
+          value: 'r',
+        },
+      })
+    })
   })
 
   it('should not unwrap built-in objects on the template', () => {