console 命令行工具 X clear
console
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue 3 Setup with Iteration Example</title>
    <script src="https://unpkg.com/vue@3.4.19/dist/vue.global.js"></script>
  </head>

  <body>
    <div id="app">
      <ul>
        <li v-for="item in len" ref="itemRefs">{{ item }} - 小猪课堂</li>
        <!-- <li v-for="item in 10" :ref="(el) => setItemRefs(el, item)"> -->
          {{ item }} - 小猪课堂
        </li>
      </ul>
      <div @click="add">add</div>
    </div>

    <script>
      const { createApp, onMounted, ref } = Vue;

      createApp({
        setup() {
            const len = ref([]);
          const itemRefs = ref([]);
          // const setItemRefs = (el, item) => {
          //   if (el) {
          //     itemRefs.push({
          //       id: item,
          //       el,
          //     });
          //   }
          // };
          const add = () => {
              len.value = [0,1,2];
              console.log(len.value);
          }
          onMounted(() => {
            setTimeout(() => {
              console.log(itemRefs.value);
            }, 1000);
          });
          return {
            itemRefs,
            add,
            len
            // setItemRefs,
          };
        },
      }).mount('#app');
    </script>
  </body>
</html>
本项目引用的自定义外部资源

vue@3