冇事来学系--Vue2.0中ref引用

---

theme: cyanosis

「这是我参与2022首次更文挑战的第1天，活动详情查看：2022首次更文挑战」

引导：

jQuery相比于原生JS，牛逼在简化了操作DOM的过程

vue的优势：MVVM框架，在vue中，不需要操作DOM，程序员只需要把数据维护好即可(数据驱动视图)

假设：在vue中需要操作DOM，需要获取到页面上某个DOM元素的引用，该如何？---> 使用ref引用

ref引用

ref是用来辅助开发者在不依赖于jQuery的情况下，获取DOM元素或组件的引用

每个vue的组件实例上(VueComponent)，都包含一个$refs对象,里面存储着对应的 DOM元素或组件的引用(组件实例对象) 默认情况下，组件的$refs指向一个空对象。在DOM元素的标签内设置了ref属性之后，$refs就会指向包含这些DOM元素的对象

```js // ref引用的使用方法

App 根组件

// 在h1中设置属性ref并令值为myh1

<button @click="changeColor">点击让h1变成红色</button>

```

---

使用ref引用组件实例

ref属性除了可以加在标签中，还可以加在组件中

```js // 在父组件中操作子组件

App 根组件

```

---

this.$nextTick(callback)方法

当某些代码的执行需要延迟到DOM重新渲染完毕之后时，就可以使用this.$nextTick(callback)方法

组件的$nextTick(callback)方法，会把callback回调函数推迟到下一个更新周期之后执行。即等组件的DOM更新完成之后，再执行callback回调函数，从而保证callback回调函数可以操作到最新的DOM元素。

```js this.$nextTick(()=> { // 需要执行的代码 })

// 如果不使用this.$nextTick(callback)方法，直接执行代码就会报错undefined。因为数据更新之后，DOM还没有重新渲染，获取不到相应的DOM结构 ```

跋尾

本篇内容就到这里了~ 我是Zeus👩🏻‍🚀来自一个互联网底层组装员，下一篇再见！ 📖