Home Vue.js different functionality when calling util in script vs template (and accounting for template unpacking)

Questions

Vue.js different functionality when calling util in script vs template (and accounting for template unpacking)

December 10, 2024

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.

>Solution :

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.