React&Vue 系列：ref 绑定 dom 节点

背景：作为使用三年 react.js 的搬运工，目前正在积极学习 vue.js 语法，而在学习的过程中，总是喜欢和 react.js 进行对比，这里也不是说谁好谁坏，而是怀有他有我也有，他没我还有的思想去学习，去总结。

• React18
• Vue3

ref 绑定 dom 节点，其实也就是对真实 dom 节点进行操作。但是呢，无论是 react 开发还是 vue 开发，通常情况下不需要、也不建议直接操作 DOM 原生，但是在某些特殊的场景下，是需要的。所以还是有必要了解一下这个小小的知识点。

其实，在我脑海中，我还能浮现一个画面：我第一份工作的时候，组长对我的代码（React 实现拖拽分组功能）质量检测时，发现我是直接操作节点，还是使用 document 的方式，当场就是一顿批斗。（说 xxx(难听的话)，React 开化是以数据流控制状态 ，而不是要你直接操作状态的，dom 操作交给 React 底层操作，不需要你管），组长下去还专门给我搜了一篇关于React 数据流的博客，让我学习。从那以后，我的开发思维就开始变化了。 第一份工作，是招人白眼的工作，也是一份学习的工作。

回忆往事，时间过得真快呀，都快出来工作三年了。好了，进入正题。

熟悉 React，先写 React

React：ref 绑定 dom 节点

单个节点

在大部分的情况下都是不用操作 dom，但是操作 dom 的时候，大部分都是单节点的形式。

在 React 中提供了一个 hook : useRef。该 hook 既可以保存变量，又可以用来操作 dom。

import { useRef } from "react";
​
function App() {
  // 定义一个用来保存 dom 的 ref
  const divDomRef = useRef<HTMLDivElement>(null);
  const btn = () => {
    console.log(divDomRef.current);
  };
  return (
    <>
      {/* ref 绑定 */}
      <div ref={divDomRef}>我是单节点</div>
      <button onClick={btn}>获取dom节点</button>
    </>
  );
}

点击按钮，就能拿到真实的 dom 节点了。

注意要点：

• ref 和 key 在 React 的 props 中，都是保留的 prop【RESERVED_PROPS】，有单独处理的逻辑。
• ref 只能绑定原生节点，如果在组件上使用 ref，就需要使用 forwardRef 进行转化。

多个节点

就是拿到一个列表数据，进行渲染，需求就是对每条数据进行 ref 绑定，进行保存。

这是理想状态中的写法：

import { useRef, useState } from "react";
​
function App() {
  const [list] = useState([1, 2, 3, 4, 5]);
  const liDomRef = useRef<HTMLLIElement>(null);
  const btn = () => {
    console.log(liDomRef.current);
  };
  return (
    <>
      <ul>
        {list.map((v) => {
          return (
            <li ref={liDomRef} key={v}>
              {v}
            </li>
          );
        })}
      </ul>
      <button onClick={btn}>获取dom节点</button>
    </>
  );
}
​
export default App;

点击按钮，发现只会拿到最后一个列表节点，这肯定不是想要的结果。那么该如何操作呢？

这里又会存在一个小小的知识点：ref 可以接受一个 ref 对象，也可以接受一个函数。嘿，那么思路就来了。

函数的第一个参数，就是 dom 节点，那么我们只需要集中保存即可

import { useRef, useState } from "react";
​
function App() {
  const [list] = useState([1, 2, 3, 4, 5]);
  const lisDomRef = useRef<HTMLLIElement[]>([]);
​
  const getRef = (el: HTMLLIElement) => {
    lisDomRef.current.push(el);
  };
​
  const btn = () => {
    console.log(lisDomRef.current);
  };
  return (
    <>
      <ul>
        {list.map((v) => {
          return (
            <li ref={getRef} key={v}>
              {v}
            </li>
          );
        })}
      </ul>
      <button onClick={btn}>获取dom节点</button>
    </>
  );
}

点击按钮，就拿到 dom 集合了。

Vue: ref 绑定 dom 节点

单个节点

<script setup lang="ts">
import { ref } from "vue";
​
const divDomRef = ref<HTMLDivElement>();
​
const btn = () => {
  console.log(divDomRef.value);
};
</script>
​
<template>
  <div ref="divDomRef">我是单节点</div>
  <button @click="btn">获取dom节点</button>
</template>

点击按钮，拿取 dom 节点。

多个节点

<script setup lang="ts">
import { ref, reactive } from "vue";
​
const list = reactive([1, 2, 3, 4, 5]);
​
const lisDomRef = ref<HTMLLIElement[]>([]);
​
// ?? 这里的类型存在问题
const getRef = (el: any) => {
  if (el) {
    lisDomRef.value.push(el);
  }
};
​
const btn = () => {
  console.log(lisDomRef.value);
};
</script>
​
<template>
  <ul>
    <li v-for="item in list" :key="item" :ref="getRef">
      {{ item }}
    </li>
  </ul>
  <button @click="btn">获取dom节点</button>
</template>

敲码完成。

总结

是不是很快，两个方面：

• 知识点简单
• React 和 Vue 无论是单节点还是多节点，使用的方式一模一样。

简单的知识，愉快的学习，后面有时间深入源码理解。