A child component in Vue.js unexpectedly starts updating when the parent component renders and uses object literals as props

Question

A child component in Vue.js unexpectedly starts updating when the parent component renders and uses object literals as props

I'm currently facing an issue with my Vue components where object literals are passed as props like:

<child :prop1="{ foo: 'bar' }"></child>

After rerendering the parent component, the prop prop1 changes and triggers an update in the Child component. However, if the prop is an object reference, it remains unchanged.

Why does this behavior occur and does it imply that using object literals (and possibly array literals) as props may not be reliable?

https://codesandbox.io/s/vue-template-jj0tb

javascript vue.js

Answer 1

Answer №1

Every time the template is executed, a new object is created when it reaches that section. The same concept applies to any reference type, such as arrays, functions, and more.

Similar to objects created in JavaScript code, each call to a function like getObject will result in a new object being returned.

function getObject() {
    return {};
}

console.log(getObject() === getObject()); // false

When using objects in JavaScript, the equality is based on reference rather than the values contained in the objects. Vue utilizes a similar approach when checking for changed props, as Vue templates are compiled down to a render function which is essentially plain JavaScript with object literals remaining as they are.

In the scenario mentioned, the render function for the parent component would generate a new object for prop1 each time it runs, assuming the template only includes the parent-child relationship:

function render(h) {
    return h('child', {
        props: {
            prop1: {foo: 'bar'}
        }
    })
}

To avoid unnecessary child updates, it is recommended to store the object in the data section and reference it by name to ensure the same object is utilized consistently.

The significance of this practice depends on the specific scenario, as extensive child updates can potentially impact performance. While child rendering typically doesn't require updating the DOM directly, computed properties, watches, or templates reliant on that prop may run if modified.

Answer 2

Every time the template is executed, a new object is created when it reaches that section. The same concept applies to any reference type, such as arrays, functions, and more.

Similar to objects created in JavaScript code, each call to a function like getObject will result in a new object being returned.

function getObject() {
    return {};
}

console.log(getObject() === getObject()); // false

When using objects in JavaScript, the equality is based on reference rather than the values contained in the objects. Vue utilizes a similar approach when checking for changed props, as Vue templates are compiled down to a render function which is essentially plain JavaScript with object literals remaining as they are.

In the scenario mentioned, the render function for the parent component would generate a new object for prop1 each time it runs, assuming the template only includes the parent-child relationship:

function render(h) {
    return h('child', {
        props: {
            prop1: {foo: 'bar'}
        }
    })
}

To avoid unnecessary child updates, it is recommended to store the object in the data section and reference it by name to ensure the same object is utilized consistently.

The significance of this practice depends on the specific scenario, as extensive child updates can potentially impact performance. While child rendering typically doesn't require updating the DOM directly, computed properties, watches, or templates reliant on that prop may run if modified.

A child component in Vue.js unexpectedly starts updating when the parent component renders and uses object literals as props

Answer №1

Similar questions

Nuxt3 encountered a request error for an unhandled 500 fetch failure at the http://localhost:3000/__nuxt_vite_node__/manifest url

Combining Django, Graphene, Apollo, django-webpack-loader, and Vue: Struggling with CORS and CSRF compatibility issues?

The error message "firebase.initializeApp is not defined" indicates that the object is not properly initialized

Guide to concealing List elements from the Search Filter when the search input field is emptied

Error thrown in JavaScript when calculating the distance

Tips for associating an id with PrimeNg menu command

Is it possible to swap out one ID value for another using JavaScript?

What about numerical inputs lacking spinners?

Firebase will automatically log users out after one hour of inactivity

javascript: window.open()

What could be the reason for my dynamic image not appearing in a child component when using server-side rendering in Nuxt and Quasar

The splash screen fails to show up when I launch my Next.js progressive web app on iOS devices

How to initiate focus on Angular 2 MdInputContainer after the view has been

JavaScript animation for sequencing traffic lights

Error: The import declaration is clashing with the local declaration of 'defineProps' in Vue version 3.3

Using Vue.js to bind labels and radio buttons in a form

Acquire an array of Worksheet names in JavaScript by utilizing ActiveX

Is there a way to distribute my World instance among several step definition files in CucumberJS?

Transfer the selected user content from one canvas to another

Using v-for to show the values of an object in Vuetify