Subscribe on changes!

defineProps should be marked as DeepReadonly, so we can't mutate the props

avatar
Jan 10th 2022

What problem does this feature solve?

Fields of props can be freely mutated. This goes against the Flux architecture, and it can cause subtle errors.

What does the proposed API look like?

I'm actually using a wrapper to defineProps, so I can have the nested properties readonly:

type DeepReadonly<T> = T extends Function ? T :
  T extends object ? { readonly [K in keyof T]: DeepReadonly<T[K]> } :
  T;

function definePropsForReal<T>() {
  return defineProps<DeepReadonly<T>>();
}

Then:

const props = definePropsForReal<{
   name: string,
   address: {
    street: string;
    no: number;
  },
}>();
avatar
Jan 10th 2022

Well it seems like you already have a solution to your problem?

I don't think that making this a built-in default is desirable as it would be a difference to props defined without script-setup, and would also be untrue: you can mutate properties of objects received as props, and while we recommend against doing so usually, it can be beneficial. Vue is not a Flux framework.