Vue3 和 Vue2 中通过ref 获取标签的不同

Vue2 中使用 ref

<h3 ref="myRefs">
<script>
	export default {
      
      
		mounted(){
      
      
			this.$refs.myRefs.xxxxxx
		}
	}
</script>

Vue3 中使用 ref

ref获取元素：利用ref函数获取组件中的标签元素
功能需求：让输入框自动获取焦点
因为调用setup的时候并没有渲染好dom标签，所以定义的时候需要保留 null 选项

<template>
  <h2>App</h2>
  <input type="text">---
  <input type="text" ref="inputRef">
</template>

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

export default {
      
      
  setup() {
      
      
    const inputRef = ref<HTMLElement|null>(null)

    onMounted(() => {
      
      
      inputRef.value && inputRef.value.focus()
    })

    return {
      
      
      inputRef
    }
  },
}
</script>