文章目录

• 前言
• 一、ref在Vue2中的用法
• 二、ref在Vue3中的用法

前言

记录一下ref在Vue2与Vue3中的使用，ref可以获取DOM元素，也可以获取子组件的数据、方法。

一、ref在Vue2中的用法

给元素绑定一个ref，然后在js中通过this.$refs获取DOM。
ref命名是随意的哦~
注意：要在mounted生命周期中获取DOM
也可以利用nextTick获取更新的DOM内容。
比如：我们需要在created生命周期中进行一些DOM操作的时候，就一定要把相关的代码逻辑写在nextTick中。或者在数据变化的时候，我们想执行某个动作，而这个动作需要使用随数据变化而改变的DOM结构的时候，也需要写在nextTick中。
下面的代码，在created生命周期是获取不到DOM的，在created中加入了nextTick就可以获取到DOM；在mounted生命周期中可以获取到DOM。

二、ref在Vue3中的用法

在Vue3中，setup中是没有this的，那么就不能再像Vue2中操作ref。
在Vue3中，需要在UnMounted生命周期中获取DOM。

效果如下：

利用nextTick也可以获取到DOM元素：