[Vuejs]-Why Vue.js doesn't trigger reactivity when Component Props are changed in a helper function, outside of the Component scope(in a different file)?

by

0👍

✅

The solution is to pass only objects, as arguments, to the external functions and mutate them as follows:

// the helpers functions hosted in "helpers.js"

export function updatePrimitiveFn(primitiveParameter) {
  primitiveParameter = true; // it will not trigger reactivity, the argument it's a primitive and for primitives JavaScript copies the argument value to the formal parameter. For arguments that are objects, JavaScript copies the pointers of these objects to the formal parameter, keeping the link between component props and formal parameters. Pointers stores the memory address where some data lives.
}
export function updateLiteralObjectFn(literalObjectParameter) {
  literalObjectParameter.value = true; // mutation keeps pointing same object in memory
}
export function updateArrayFn(arrayToBeUpdated) {
  arrayToBeUpdated.push(true); mutation keeps pointing same object in memory
}

Check live demo: https://codesandbox.io/s/hardcore-volhard-mf6x0?file=/src/components/MyComponent.vue:0-179

For more information can be studied the subject "Pass by Value vs. Pass by Reference".

Leave a comment