vue3 compsition API正确使用ref获取html元素

函数方式见文章：一文搞懂Vue3中如何使用ref获取元素节点？ - 知乎 (zhihu.com)

注意：如果是函数方式，请在onBeforeUpdate钩子函数中清空ref存放dom的数组变量，不然ref数组变量中的元素可能会一直增加

<template>
  <!-- 定义ref: helloRef -->
  <div class="hello" ref="helloRef">你好</div>
  <p ref="pElRefs">第一段</p>
  <p ref="pElRefs">第二段</p>
  <p ref="pElRefs">第三段</p>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";

export default defineComponent({
  setup(){
    // 定义ref: helloRef与template中的ref名称一致
    // 注意：这里不要将初始值设置为null，否则，在ts语法下，还得先判断不为null
    const helloRef = ref<HTMLElement>();
    const pElRefs = ref<HTMLParagraphElement[]>();
    onMounted(()=>{
      console.log(helloRef.value)
      console.log(pElRefs.value)
    })
    // 注意: 一定要导出
    return {helloRef}
  }
});
</script>