@[toc]

虽然在 Vue 中不提倡我们直接操作 DOM，毕竟 Vue 的理念是以数据驱动视图。但是在实际情况中，我们有很多需求都是需要直接操作 DOM 节点的，这个时候 Vue 提供了一种方式让我们可以获取 DOM 节点：ref 属性。ref 属性是 Vue2 和 Vue3 中都有的，但是使用方式却不大一样，这也导致了很多从 Vue2 转到 Vue3 的小伙伴感到有些困惑。

今天我们就来揭开 Vue3 中 ref 的神秘面纱！

1.回顾 Vue2 中的 ref

在学习 Vue3 中的 ref 之前，我们先来了解下 Vue2 中 ref，这样一对比，大家更能够加深印象，以及它们之间的区别。

• 获取节点：

  这是 ref 的基本功能之一，目的就是获取元素节点，在 Vue 中使用方式也很简单，代码如下：

    <template>
      <div id="app">
        <div ref="hello">小猪</div>
      </div>
    </template>
    <script>
    export default {
       
      mounted() {
       
        console.log(this.$refs.hello); // <div>小猪</div>
      },
    };
    </script>
  

上段代码中可以看到我们在 div 元素上绑定了 ref 属性，并命名为 hello，接下来我们直接使用 this.$refs.hello 的方式就可以获取到该 DOM 元素了。

2.Vue3 中 ref 访问元素

Vue3 中通过 ref 访问元素节点与 Vue2 不太一样，在 Vue3 中我们是没有 this 的，所以当然也没有 this.$refs。想要获取 ref，我们只能通过声明变量的方式。

• 创建一个 Vite 项目：

  为了方便演示，我们直接在 Vite 项目中演示 ref 代码，创建项目指令如下：

    npm create vite@latest my-vue-app --template vue-ts
  

• 代码如下：

    <template>
      <div ref="hello">小猪课堂</div>
    </template>
    <script setup lang="ts">
    import {
        onMounted, ref } from "vue";
    const hello = ref<any>(null);
    onMounted(() => {
       
      console.log(hello.value); // <div>小猪课堂</div>
    });
    </script>
  

  • 输出结果：

上段代码中我们同样给 div 元素添加了 ref 属性，为了获取到这个元素，我们声明了一个与 ref 属性名称相同的变量 hello，然后我们通过 hello.value 的形式便获取到了该 div 元素。

• 注意点：

  • 变量名称必须要与 ref 命名的属性名称一致。
  • 通过 hello.value 的形式获取 DOM 元素。
  • 必须要在 DOM 渲染完成后才可以获取 hello.value，否则就是 null。

3.v-for 中使用 ref

使用 ref 的场景有多种，一种是单独绑定在某一个元素节点上，另一种便是绑定在 v-for 循环出来的元素上了。这是一种非常常见的需求，在 Vue2 中我们通常使用:ref="..."的形式，只要能够标识出每个 ref 不一样即可。

但是在 Vue3 中又不太一样，不过还是可以通过变量的形式接收。

• 代码如下：

  ```c
  

  <div ref="hello">小猪课堂</div>
  <ul>
    <li v-for="item in 10" ref="itemRefs">
      {
      {item}} - 小猪课堂
    </li>
  </ul>