Vue.js中script与模板调用toRawDeep的行为差异原因咨询

写法一（符合预期）的执行逻辑 #

<script setup>
import {toRawDeep} from './utils'
const props = defineProps({
    rowData: {type: Array}
})

const r = toRawDeep(props.rowData)
</script>

<template>
  <ag-grid-vue :rowData="r" />
</template>

这段代码中，toRawDeep(props.rowData)仅在组件初始化阶段执行一次：

• 执行时会对父组件传入的初始响应式rowData进行深度克隆，得到一个完全脱离Vue响应式系统的普通数组。
• 后续父组件更新rowData时，这段赋值代码不会重新运行，r始终保持初始克隆的结果，因此ag-grid-vue接收的是静态数据，不会随父组件的更新而变化。

写法二（不符合预期）的执行逻辑 #

<script setup>
import {toRawDeep} from './utils'
const props = defineProps({
    rowData: {type: Array}
})
</script>

<template>
  <ag-grid-vue :rowData="toRawDeep(rowData)" />
</template>

模板中的表达式toRawDeep(rowData)会在组件每次重新渲染时触发执行：

• 当父组件更新rowData，子组件的props发生变化，会触发子组件重新渲染。
• 渲染过程中，模板会调用toRawDeep处理最新的rowData（此时的rowData是父组件更新后的响应式数据，在模板中会自动解包为原始值），生成新的克隆结果并传给ag-grid-vue，所以父组件的更新会同步反映到表格组件中。

核心差异总结 #

两者的本质区别并非rowData是否解包，而是**toRawDeep的执行时机与次数**：

• 写法一：仅在组件初始化时执行一次，得到固定的克隆数据。
• 写法二：每次组件渲染都会执行，始终基于最新的rowData生成克隆数据。

内容的提问来源于stack exchange，提问作者user2263572