From b93f26464785de227b88c51a88328ae80e80d804 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Mon, 22 Apr 2024 20:47:45 +0800
Subject: [PATCH] fix(runtime-core): props should be readonly via direct
 template access

close #8216
close #10736
---
 packages/runtime-core/src/componentRenderUtils.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/runtime-core/src/componentRenderUtils.ts b/packages/runtime-core/src/componentRenderUtils.ts
index 4b83c699031..6f4a1a2af76 100644
--- 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
   }