Vue3 Template Refs详解

在使用 Composition API 时，想要访问 template 的 dom 元素，需要在 setUp 函数里为 template 声明一个对应的 ref 对象，并从 setup()里返回。

<template>
  <div ref="root"></div>
</template>

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

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

      onMounted(() => {
        // 组件被创建完成后，这个Dom元素被分配给了ref。
        console.log(root.value) // <div/>
      })

      return {
        root
      }
    }
  }
</script>