[Vuejs]-Undesired rerender of the child component in Vue

by

0👍

In short, the re-render is expected since a template binding changes. Here’s why:

  • The updated hook runs whenever a component re-renders

  • A component re-renders if a binding in its template changes

  • The child component in your example binds to fields in its template (from provide)

  • fields changes when you run the test method

  • I’m guessing Vue can’t detect when only a specific property changed (i.e. fields.test) so it re-renders if fields changes at all, to be safe. That’s probably for the same reasons you have to use Vue.set in the first place (property change detection).

You could fix this by only using provide on the property itself:

provide() {
  return {
    test: this.fields.test
  };
},

In the child:

inject: ["test"]

In the child template:

<slot class="hello" v-bind="test"></slot>

Since fields is no longer used in the child template, it won’t re-render when fields changes.

Leave a comment