1. 獲取單個dom實例。

在渲染上下文中暴露 root，并通過 ref="root"，將其綁定到 div 作為其 ref。在虛擬 DOM 補丁算法中，如果 VNode 的 ref 鍵對應于渲染上下文中的 ref，則 VNode 的相應元素或組件實例將被分配給該 ref 的值。這是在虛擬 DOM 掛載/打補丁過程中執行的，因此模板引用只會在初始渲染之后獲得賦值。
作為模板使用的 ref 的行為與任何其他 ref 一樣：它們是響應式的，可以傳遞到 (或從中返回) 復合函數中。

<template> 
  <div ref="root">This is a root element</div>
</template>

<script>
  import { ref, onMounted } from 'vue'

  export default {
    setup() {
      const root = ref(null)

      onMounted(() => {
        // DOM元素將在初始渲染后分配給ref
        console.log(root.value) // <div>這是根元素</div>
      })

      return {
        root
      }
    }
  }
</script>

2.獲取多個dom實例

<template>
  <div v-for="(item, i) in list" :ref="el => { if (el) divs[i] = el }">
    {{ item }}
  </div>
</template>

<script>
  import { ref, reactive, onBeforeUpdate } from 'vue'

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

      // 確保在每次更新之前重置ref
      onBeforeUpdate(() => {
        divs.value = []
      })

      return {
        list,
        divs
      }
    }
  }
</script>