vue3个人心得---功能详解（六）模板引用ref

ref的作用

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

ref不需要用到 getElementById 直接使用ref名即可对 DOM 进行操作,如下:

import {ref} from 'vue'
const itemR=ref()
function uu(){
console.log(itemR.value)}//直接使用ref名操作DOM

ref的写法

模板部通过标签的ref属性给DOM赋标识符

选项式API通过$fefs对象来操作ref标识的DOM

this.$refs.标识符

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

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

注意此处的ref声明的响应变量不是普通的响应变量,而是DOM响应变量,他的值是DOM对象。

ref生命周期问题

ref属性是在DOM 渲染阶段生成,因此在渲染生成前使用ref会得到空的DOM,只有在渲染完成后才能使用ref操作DOM,如下ref将操作不了DOM:

放在onMounted里,才能成功操作DOM,如下:

ref的标识名

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