《Vue3 版本差异》Vue3.5+ 在组件或HTML元素绑定 ref 差异

• 组件上的 ref，组合式写法的变化；

• 在 2024.09.03 发布的 v3.5.0 版上新增接口 useTemplateRef；

v3.5 之前

• 代码第 8 行，导入 ref；
• 代码第 10 行，使用 ref 传参为 null，变量名与 第三行 ref 同名；

<template>
    <div>
        <span ref="spanRef">这是一条测试！！！</span>        
        <button @click="onClick">点击</button>
    </div>
</template>
<script setup>
import { ref } from 'vue'

const spanRef = ref(null)

function onClick() {
    console.log(spanRef.value.innerText)
}
</script>

v3.5 以后

• 代码第 8 行，导入接口 useTemplateRef；
• 代码第 10 行，使用 useTemplateRef 传参为字符串 spanRef，传参与 第三行 ref 同名；

<template>
    <div>
        <span ref="spanRef">这是一条测试！！！</span>        
        <button @click="onClick">点击</button>
    </div>
</template>
<script setup>
import { useTemplateRef } from 'vue'

const spanObj = useTemplateRef('spanRef')

function onClick() {
    console.log(spanObj.value.innerText)
}
</script>