关于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的标识名

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