vue2.x获取dom节点的方式，模板中ref="uname"指定，然后使用this.$refs.uname，但是vue3.0中已经没有this了，这样我们如何获取dom节点呢？
1. 获取的静态DOM元素
- 总结
- 模板中的名称必须和定义的ref(null)变量名相同
- 这个变量名称必须return出去
- 使用
- 模板中定义ref：<div ref="numDom" @click="getDom">{{ num }}</div>
- 引入：import { ref } from "vue";
- 接受DOM（与模板中ref绑定的名称必须相同）：const numDom = ref(null);
- 返回给模板使用： return { numDom };
<template>
<div>
<div ref="numDom" @click="getDom">{{ num }}</div>
</div>
</template>
<script>
import { ref } from "vue";
export default {
setup() {
const num = ref(100);
// 模板中ref的名称，必须和变量名相同，且ref函数包裹null，必须return出去
const numDom = ref(null);
// 操作dom，numDom是ref()函数修饰的属性，调用用的时候必须numDom.value（切忌）
const getDom = () => {
console.log(numDom.value);
numDom.value.style = "color:red;font-size: 100px";
};
// numDom必须return出去
return { num, getDom, numDom};
</script>
2.获取遍历的动态DOM元素
- 总结
- 模板中需要:ref写成动态的属性并绑定函数，此函数遍历时返回每个DOM元素
- 使用此方法需要创建空数组结果集，最后必须return这个结果集，且结果集中的DOM数组无需使用.value的方式获取DOM，因为它不是ref修饰的，只是普通变量
- 组件更新的时候会重复的设置dom元素给数组，所以，使用ref获取v-for遍历的DOM元素，需要在组件更新的声明周期onBeforeUpdate中，重置DOM元素结果集
- 使用
- 在模板中ref绑定：<li v-for="(item, i) in list" :key="i" :ref="listDom">{{ item.name }}</li>
- 引入：import { ref, onBeforeUpdate } from "vue"
- 创建空数组结果集：let resultList = [];
- 在ref绑定的函数中，将遍历的DOM元素push进结果集
const listDom = (e) => {
resultList.push(e);
}; - 在组件更新onBeforeUpdate生命周期中重置dom元素结果集
onBeforeUpdate(() => {
resultList = [];
}); - 通通return：return { list, listDom, getListDom };
<template>
<div>
<ul @click="getListDom">
<li v-for="(item, i) in list" :key="i" :ref="listDom">{{ item.name }}</li>
</ul>
</div>
</template>
<script>
import { ref, onBeforeUpdate } from "vue";
export default {
setup() {
// 获取动态DOM。v-for生成的DOM
const list = ref([
{
name: "卡卡",
},
{
name: "不卡",
},
]);
// 结果集：创建数组用来存储遍历的DOM元素
let resultList = [];
// 模板中ref的名称，必须和变量名相同，且动态的ref必须使用箭头函数的方式（切忌），将遍历的结果push进结果集，必须return出去
const listDom = (e) => {
resultList.push(e);
};
// 操作dom，resultList没有用ref修饰，所以不需要通过.value获取dom
const getListDom = () => {
console.log(resultList);
for (let i = 0; i < resultList.length; i++) {
if (i % 2 == 0) {
resultList[i].style = "color:red;font-size: 100px";
}
}
};
// 问题：组件更新的时候会重复的设置dom元素给数组：
// 解决方式：ref获取v-for遍历的DOM元素，需要在组件更新的时候重置接受dom元素的数组。
onBeforeUpdate(() => {
resultList = [];
});
// 必须返回 定义的dom元素： numDom，listDom 否则无效
return { list, listDom, getListDom };
},
};
</script>
