Search code examples
javascriptvue.jshierarchy

With VUE - is the HTML update even if only part of it is different?

Say I have an array of objects that is a tree-like structure. It would display in the HTML as a list.

And when I click on a list item children should expand collapse.

If on the server side I send the entire list everytime someone requests to expand a portion of it, would Vue just refresh that part, or the entire list ? I know that visually that would not make any difference, I am just trying to figure out what Vue does internally

Solution

  • https://v2.vuejs.org/v2/guide/list.html

    To give Vue a hint so that it can track each node’s identity, and thus reuse and reorder existing elements, you need to provide a unique key attribute for each item:

    <div v-for="item in items" v-bind:key="item.id">