fix(runtime-core): props should be readonly via direct template access

close #8216
close #10736

diff --git a/packages/runtime-core/src/componentRenderUtils.ts b/packages/runtime-core/src/componentRenderUtils.ts
index 4b83c69903140c16a93ff3158dc132bc30f180f3..6f4a1a2af7614146462722b484989e0dd2ffdba4 100644 (file)
--- a/packages/runtime-core/src/componentRenderUtils.ts
+++ b/packages/runtime-core/src/componentRenderUtils.ts
@@ -26,6 +26,7 @@ import {
   isCompatEnabled,
   warnDeprecation,
 } from './compat/compatConfig'
+import { shallowReadonly } from '@vue/reactivity'
 
 /**
  * dev only flag to track whether $attrs was used during render.
@@ -48,7 +49,6 @@ export function renderComponentRoot(
     vnode,
     proxy,
     withProxy,
-    props,
     propsOptions: [propsOptions],
     slots,
     attrs,
@@ -60,10 +60,11 @@ export function renderComponentRoot(
     ctx,
     inheritAttrs,
   } = instance
+  const props = __DEV__ ? shallowReadonly(instance.props) : instance.props
+  const prev = setCurrentRenderingInstance(instance)
 
   let result
   let fallthroughAttrs
-  const prev = setCurrentRenderingInstance(instance)
   if (__DEV__) {
     accessedAttrs = false
   }