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

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