Vue3.2：为什么Ref操作Dom好用高效？

缘起在开发一个项目之前，我们往往会先做一个需求分析。对于前端，我们可以研究或者选择一个基础的组件库来提高我们的工作效率。毕竟对于一个在乎时间成本的公司来说，是不会给你看电视剧玩游戏的时间去开发一个类似日历的组件的。然而，市面上的组件库并不能全部满足我们的需求。这时候就需要我们自己编写组件来应用到项目中了。而这就是我想说的：如何设计组件，使其易于应用（或减少代码量）并提高可扩展性，便于需求变更和后续维护？方式有很多种，利用Ref来操作Dom的特性是其中之一，但是这种方式让我们在维护和操作Modal、Popup、频繁操作Dom来显示和隐藏交互组件方面发挥了很大的优势.下面从几个方面分析一下Ref操作Dom的相关知识点和应用实例。Ref获取Dom的本质。Vue2.x和Vue3.x中的Ref操作Dom。据说Ref获得了Dom的精华。Vue2.x中Vue的对象属性$refs实际上是所有注册的refs的集合，ref对应模板模板中不同组件或普通Dom元素关联的ref="xx"。;源码中实际获取ref的方法也是通过native方法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并操作其方法属性，@ok="editAvailableUser"/>或dd