Vue 3 - Refs List

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <div v-for="(item, i) in list" :ref="el => { divs[i] = el }">
    {{ item }}
  </div>
  <button @click="list.pop()">
    Remove
  </button>
</div>

JavaScript

const { createApp, onBeforeUpdate, onMounted, onUpdated, reactive, ref } = Vue

const RefList = {
  setup () {
    const list = reactive([1, 2, 3])
    const divs = ref([])

    // make sure to reset the refs before each update
    onBeforeUpdate(() => {
      divs.value = []
    })

    onMounted(() => {
      console.log(arrayToString(divs.value))
    })
     
    onUpdated(() => {
      console.log(arrayToString(divs.value))
    })

    return {
      list,
      divs
    }  
  }
}

const app = createApp(RefList)

app.mount('#app')

function getType (obj) {
  return ({}).toString.call(obj)
}

function arrayToString (arr) {
  if (!Array.isArray(arr)) {
    return String(arr)
  }
  
  return `Array(${arr.length}){` + arr.map(getType).join(', ') + '}'
}