浅析Ref操作Dom在Vue2.x和Vue3.x的不同

Ref操作Dom为何既易用又高效？下面本篇文章带大家聊聊Ref操作，介绍一下Ref获取Dom的本质、其在Vue2.x和Vue3.x的不同等，希望对大家有所帮助！

在开发一个项目之前，我们往往都是先做下需求分析，针对前端而言，就是可以调研或者选择一个基础组件库，来提高我们的工作效率。毕竟，对比较计较时间成本的公司来说，不会给你拿看电视剧玩游戏的时间去专门开发一个类似日历的组件。但在市面上的组件库，并不能都能满足我们的需求。这个时候，我们就需要自己手写组件，来应用到项目中。

而这就是我想说的: 如何设计组件，让其既能易于应用（或者说减少代码量），又能提高扩展性，方便需求变更和后续维护？

可以有很多种方式，而利用Ref操作Dom的特性随是其中之一，但这个方式却让我们在维护和操作Modal、Popup以及频繁操作Dom显示和隐藏交互的组件的时候，却发挥得很大优势。【相关推荐：vuejs视频教程、web前端开发】

就对Ref操作Dom的相关知识点以及应用实例分几个方面来做下剖析

Ref获取Dom的本质
Ref操作Dom在Vue2.x和Vue3.x的不同
Ref操作组件Dom和父子组件单向传递对比

详说

Ref获取Dom的本质

Vue2.x中Vue的对象属性$refs，其实就是所有注册过的ref的一个集合，而ref对应着template模版中，不同组件或普通Dom元素上关联的ref="xx"; 源码中ref的实际获取方式也是通过原生方式getElementById而得到的Dom节点；可以说ref是document.getElementById的语法糖。vue3的ref延续了vue2的用法，还增加了一个作用就是创建响应式数据

也许有人会问了，既然ref和getElementById都能获取到Dom，那么在项目开发中，我选择哪种方式都没什么区别呢？

关于这个问题，经过数据表明，$refs相对document.getElementById的方法，会减少获取dom节点的消耗；而具体原因，等下一篇文章再详细探讨。

Ref操作Dom在Vue2.x和Vue3.x的不同

Vue2.x

我们只需要在相应的Dom元素或者组件加上ref="xx"属性,然后在Vue对象中使用this.$refs.xx,就可以直接获取到该Dom并操作其方法属性,

<user-and-dep-tree-select-modal
  ref="avaUserTreeSelect"
  title="選擇可見範圍"
  :project-id="currentProjectId"
  :visible.sync="avaUserModalVisible"
  @ok="editAvailableUser"
/>
或者
<div class="user" ref="user">dd</div>

// $refs
showManagerModal () {
  this.$refs.avaUserTreeSelect.showModal(this.form.managers)
  console.log(this.$refs.user.text)
},

Vue3.2

在Vue3.2版本使用的方式

//普通Dom
<div class="user" ref="user"></div>
//组件
<batch-adjust-department-modal ref="batchAdjustDepartmentRef" />

<script setup>
import { ref } from &#39;vue&#39;;
// modal调整部门弹层Dom
const batchAdjustDepartmentRef = ref(null);
const user = ref(null);
</script>

也许这里有人疑问，为什么声明了一个和template的ref中同名的常量变量就绑定了对应的dom? 在这里再补充说明一下：

Vue3 在早期版本（ 3.0.0-beta.21 之前）中对 composition api 的支持，只能在组件选项 setup 函数中使用。而相应式的变量都是通过在setup()方法中return {写入需要在模版中使用的变量或方法}

<script>
import { defineComponent, ref } from &#39;vue&#39;

export default defineComponent({
  name: &#39;HelloWorld&#39;,
  setup(props, ctx) {
    const count = ref(0)
    function add() {
      count.value++
    }
    // 使用return {} 把变量、方法暴露给模板
    return {
      count,
      add,
    }
  },
})
</script>