toRawDeep clones nested proxy object (calling toRaw at each level to clone the original proxy object).
// this works as expected (updates to prop.rowData in parent do not change what is rendered in the ag-grid-vue component)
import {toRawDeep} from './utils'
const props = defineProps({
rowData: {type: Array}
})
const r = toRawDeep(props.rowData)
</script>
<template>
<ag-grid-vue :rowData="r" />
</template>
// updates to prop.rowData in the parent are reflected in the ag-grid-vue component. Not what I would expect.
<script setup>
import {toRawDeep} from './utils'
const props = defineProps({
rowData: {type: Array}
})
</script>
<template>
<ag-grid-vue :rowData="toRawDeep(rowData)" />
</template>
Anyone know why these 2 behave differently? My understanding is that props.rowData should be unpacked to rowData in the template, therefore these should do the same thing.
That is probably because <ag-grid-vue :rowData="toRawDeep(rowData)" /> will rerun toRawDeep(rowData) every time an update is made to props.rowData. Whereas const r = toRawDeep(props.rowData) is only run once when the component is first loaded.