fix(core): propsProxy should not convert non-reactive nested values

packages/reactivity/__tests__/readonly.spec.ts

@@ -10,7 +10,7 @@ import {
   unlock,
   effect,
   ref,
-  readonlyProps
+  shallowReadonly
 } from '../src'
 import { mockWarn } from '@vue/runtime-test'
 
@@ -444,31 +444,31 @@ describe('reactivity/readonly', () => {
     ).toHaveBeenWarned()
   })
 
-  describe('readonlyProps', () => {
-    test('should not unwrap root-level refs', () => {
-      const props = readonlyProps({ n: ref(1) })
-      expect(props.n.value).toBe(1)
+  describe('shallowReadonly', () => {
+    test('should not make non-reactive properties reactive', () => {
+      const props = shallowReadonly({ n: { foo: 1 } })
+      expect(isReactive(props.n)).toBe(false)
     })
 
-    test('should unwrap nested refs', () => {
-      const props = readonlyProps({ foo: { bar: ref(1) } })
-      expect(props.foo.bar).toBe(1)
-    })
-
-    test('should make properties readonly', () => {
-      const props = readonlyProps({ n: ref(1) })
-      props.n.value = 2
-      expect(props.n.value).toBe(1)
-      expect(
-        `Set operation on key "value" failed: target is readonly.`
-      ).toHaveBeenWarned()
-
+    test('should make root level properties readonly', () => {
+      const props = shallowReadonly({ n: 1 })
       // @ts-ignore
       props.n = 2
-      expect(props.n.value).toBe(1)
+      expect(props.n).toBe(1)
       expect(
         `Set operation on key "n" failed: target is readonly.`
       ).toHaveBeenWarned()
     })
+
+    // to retain 2.x behavior.
+    test('should NOT make nested properties readonly', () => {
+      const props = shallowReadonly({ n: { foo: 1 } })
+      // @ts-ignore
+      props.n.foo = 2
+      expect(props.n.foo).toBe(2)
+      expect(
+        `Set operation on key "foo" failed: target is readonly.`
+      ).not.toHaveBeenWarned()
+    })
   })
 })

packages/reactivity/src/baseHandlers.ts

@@ -11,17 +11,21 @@ const builtInSymbols = new Set(
     .filter(isSymbol)
 )
 
-function createGetter(isReadonly: boolean, unwrap = true) {
+function createGetter(isReadonly: boolean, shallow = false) {
   return function get(target: object, key: string | symbol, receiver: object) {
     let res = Reflect.get(target, key, receiver)
     if (isSymbol(key) && builtInSymbols.has(key)) {
       return res
     }
-    if (unwrap && isRef(res)) {
-      res = res.value
-    } else {
+    if (shallow) {
       track(target, OperationTypes.GET, key)
+      // TODO strict mode that returns a shallow-readonly version of the value
+      return res
     }
+    if (isRef(res)) {
+      return res.value
+    }
+    track(target, OperationTypes.GET, key)
     return isObject(res)
       ? isReadonly
         ? // need to lazy access readonly and reactive here to avoid
@@ -146,7 +150,7 @@ export const readonlyHandlers: ProxyHandler<object> = {
 // props handlers are special in the sense that it should not unwrap top-level
 // refs (in order to allow refs to be explicitly passed down), but should
 // retain the reactivity of the normal readonly object.
-export const readonlyPropsHandlers: ProxyHandler<object> = {
+export const shallowReadonlyHandlers: ProxyHandler<object> = {
   ...readonlyHandlers,
-  get: createGetter(true, false)
+  get: createGetter(true, true)
 }

packages/reactivity/src/index.ts

@@ -4,7 +4,7 @@ export {
   isReactive,
   readonly,
   isReadonly,
-  readonlyProps,
+  shallowReadonly,
   toRaw,
   markReadonly,
   markNonReactive

packages/reactivity/src/reactive.ts

@@ -2,7 +2,7 @@ import { isObject, toRawType } from '@vue/shared'
 import {
   mutableHandlers,
   readonlyHandlers,
-  readonlyPropsHandlers
+  shallowReadonlyHandlers
 } from './baseHandlers'
 import {
   mutableCollectionHandlers,
@@ -85,18 +85,17 @@ export function readonly<T extends object>(
 }
 
 // @internal
-// Return a readonly-copy of a props object, without unwrapping refs at the root
-// level. This is intended to allow explicitly passing refs as props.
-// Technically this should use different global cache from readonly(), but
-// since it is only used on internal objects so it's not really necessary.
-export function readonlyProps<T extends object>(
+// Return a reactive-copy of the original object, where only the root level
+// properties are readonly, and does not recursively convert returned properties.
+// This is used for creating the props proxy object for stateful components.
+export function shallowReadonly<T extends object>(
   target: T
 ): Readonly<{ [K in keyof T]: UnwrapNestedRefs<T[K]> }> {
   return createReactiveObject(
     target,
     rawToReadonly,
     readonlyToRaw,
-    readonlyPropsHandlers,
+    shallowReadonlyHandlers,
     readonlyCollectionHandlers
   )
 }