【Vue3】 ref属性获取元素节点

在Vue2中ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件。

但是Vue3中去掉了$refs属性，本文将说明如何在vue3中使用ref。

一、setup中创建并返回响应式数据

setup: () => {
    const myRef = ref<HTMLElement | null>(null)
    onBeforeMount(()=>{
      console.log('before mount:',myRef.value)
    })
    onMounted(()=>{
      console.log('mounted:',myRef.value)
    })
    return { myRef }
  }

二、template中使用ref属性绑定响应式数据

<template>
  <div ref="myRef">
      <p>Test ref in Vue3</p>
  </div>
</template>

三、查看控制台打印

通过打印结果发现，在mounted后，可以通过myRef访问元素节点