2

I didn't see an answer to this that compared the two but please shoot me in the right place if there is.

I have two working examples of re-rendering a component in a Vue 3 application at present and wanted some advice on which method might be better and why.

Essentially, I have a child grid component that loads data from an API. In the parent component, we listen for an event, perform an action and then re-render the component.

Method 1

The first method is that we apply a ref called grid to the child component, and when we listen for @custom-event in the parent, we call that ref and then subsequently a method on it called refreshGrid - this calls the child grid instance method called refreshGrid which just calls a DevExtreme method to reload the data (ultimately triggering a call to the API again). This method seems clunky and jumps about between the two components.

Method 2

We simply add a :key to the child component, and when we listen for @custom-event and call the method, we just increment the key by 1, forcing Vue to reload the component.

I'm not sure whether the second method would cause more overhead than the first, as the first method eventually calls a method on DevExtreme to just reload the component.

Any advice would be appreciated.

Cheers

Nick Davies
  • 573
  • 5
  • 15
  • 4
    1 is correct. 2 is a hack and shouldn't be used when there's another option. It's unknown if it's possible to handle an update fully inside the component. "I have two working examples" - you could list them because the implementation is relevant, see https://stackoverflow.com/help/mcve – Estus Flask Jul 31 '22 at 00:03
  • 2
    Also, 2 just don't re-render component. It forces Vue to destroy current instance and create new one. It looks like it is just re-rendering but overhead is much bigger. – Michal Levý Jul 31 '22 at 06:16
  • Thanks for the replies. After a little research I agree with your comments. I will move to using the first approach going forward. – Nick Davies Aug 01 '22 at 08:09

0 Answers0