vue的ref

1.Vue特殊特性

Vue特点: 数据驱动界面更新, 无需操作DOM来更新界面

也就是说Vue不推荐我们直接操作DOM, 但是在企业开发中有时候我们确实需要拿到DOM操作DOM
那么如果不推荐使用原生的语法获取DOM, 我们应该如何获取DOM?
在Vue中如果想要拿到DOM元素我们可以通过 ref 来获取

2.ref使用

ref–vue官网说明

2.1 在需要获取的元素上添加ref属性

<p ref="mypp">我是段落</>

2.2 在使用的地方通过 this.$refs.xxx获取

this.$refs.mypp

3.ref特点

ref添加到元素DOM上, 拿到的就是元素DOM
ref添加到组件上, 拿到的就是组件

如果拿到的是组件，那么就可以拿到组件中的data、methods等

4.注意点:

1.如果是通过原生的语法来获取元素, 无论是原生的元素还是自定义的组件, 拿到的都是原生的元素

VUE官方并不推荐我们这样获取

2.在Vue中如果想获取原生的元素或者获取自定义的组件, 可以通过ref来获取

 ref 如果是添加给元素的元素, 那么拿到的就是元素的元素
 ref 如果是添加给自定义的组件, 那么拿到的就是自定义的组件

3.关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。(官网原话)

4.$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。(官网原话)

子组件ref—访问子组件实例或子元素(vue官网说明)
$refs----vue官网说明

5.使用注意点

<div class="lyric" ref="lyric"></div>

直接通过this.$refs.lyric.offsetHeight拿到的是undefined，因为this.$refs.lyric拿到的vue组件，从组件中拿到原生的元素this.$refs.lyric.$el.offsetHeight

---

学习笔记❥(^_-)