关于vue.js:vue3个人心得功能详解六模板引用ref

ref 的作用

原始对 DOM 的操作，应用的是通过 ID 与 getElementById 办法来操作, 如下:

<script setup>
function uu(){console.log( document.getElementById('itemR'))}// 借助 getElementById 办法及 ID 操作 DOM
</script>
<template>
 <button v-on:click="uu"></button>
    <li  id="itemR">
     我来试试
    </li> 
</template>

ref 不须要用到 getElementById 间接应用 ref 名即可对 DOM 进行操作, 如下:

import {ref} from 'vue'
const itemR=ref()
function uu(){console.log(itemR.value)}// 间接应用 ref 名操作 DOM
</script>
<template>
 <button v-on:click="uu"></button>
    <li  ref="itemR">
     我来试试
    </li>
</template>

ref 的写法

模板部通过标签的 ref 属性给 DOM 赋标识符
<li ref=” 标识符 ”>
选项式 API 通过 $fefs 对象来操作 ref 标识的 DOM

this.$refs. 标识符

组合式 API 不再应用 $refs 对象, 而是间接应用标识符来操作, 不过须要先用 ref 声名这个标识符。

const 标识符 =ref()
      标识符.value

留神此处的 ref 申明的响应变量不是一般的响应变量, 而是 DOM 响应变量, 他的值是 DOM 对象。

ref 生命周期问题

ref 属性是在 DOM 渲染阶段生成, 因而在渲染生成前应用 ref 会失去空的 DOM, 只有在渲染实现后能力应用 ref 操作 DOM, 如下 ref 将操作不了 DOM:

<script setup>
import {ref,reactive,onMounted,onBeforeMount} from 'vue'
const itemR=ref()
console.log(itemR.value)// 打印不出 <li> 标签
</script>
<template>
     <li  ref="itemR">
     我来试试
    </li>
  </template>

放在 onMounted 里, 能力胜利操作 DOM, 如下:

<script setup>
import {ref,reactive,onMounted,onBeforeMount} from 'vue'
const itemR=ref()
onMounted(()=>{console.log(itemR.value)})// 胜利打印出 <li> 标签
</script>
<template>
 <button v-on:click="uu"></button>
    <li  ref="itemR">
     我来试试
    </li>
</template>

ref 的标识名

字符型标识
数组型标识
变量型标识