What's the correct way to remove and add nodes in one pass?

[CharlieDigital]

Scenario

I've mutated some state and then I am replacing the nodes with a newly constructed set of nodes

Problem

I've created a reproduction (link below). But the gist of it is suppose I have a function like this:

const elements = ref([])

let pass = 0

function generateNodes() {
  while (elements.value.length > 0) {
    console.log(`Popped`)
    elements.value.pop()
  }

  console.log('Next nodes...')

  for (let i = 0; i < 4; i++) {
    elements.value.push({
      id: `${i}_${pass}`,
      label: `Node: ${i} @ ${pass}`,
      position: {
        x: 0,
        y: (i + pass * 4) * 40,
      },
    })
  }

  pass++

  console.log(`Completed pass ${pass} with ${elements.value.length} nodes`)
}

When generateNodes is invoked, I remove the existing nodes and replace with a set of new nodes. However, my observation is that no matter how I modify the elements ref (e.g. replacing the array, using splice), this does not behave quite as I expect it to.

Is there a correct way to perform this type of mutation where I'm replacing a set of nodes with another set of nodes?

If I only pop 1, it works as expected:

function generateNodes() {
  /*
  while (elements.value.length > 0) {
    console.log(`Popped`)
    elements.value.pop()
  }
  */

  elements.value.pop()
}

Reproduction

https://codesandbox.io/p/devbox/wonderful-lehmann-wljgw5?file=%2Fsrc%2FApp.vue

[bcakmakoglu]

this does not behave quite as I expect it to.

What does this mean? Can you elaborate?

Honestly, just overwrite your original ref with a new array instead of mutating it and you should already be good to go 😄

[CharlieDigital]

Interesting. It works, but it seems interesting that as long as I only remove n - 1 elements, it's OK.

Thanks for the tip, but also curious behavior with the reactivity.

[bcakmakoglu]

The reactivity isn't as straight forward for this as I'd like it to be -for now, think of it as a shallowRef and treat it as such, meaning to trigger reactivity you want to create a new array instead of mutating the existing one :)