Vue ref引用

1. ref 引用概念

• jquery ：简化了程序员操作 DOM 的过程。
• vue 优势：MVVM 在vue中，程序员不需要操作 DOM 。程序员只需要把数据维护好即可。
• 建议：在 vue 的项目中，不要使用 jquery。
• 那么在 vue 中需要操作 DOM 怎么办呢？

ref 用来辅助开发者在不依赖 jQuery ，不调用获取 DOM 的API 下，获取 DOM 元素或组件的引用。

每个 vue 的组件实例上，都包含一个 $refs 对象，里面储存着对应的 DOM 元素或组件的引用。默认情况下，组件的 $refs 指向一个空对象。

2.使用 ref引用获取 DOM

• 使用 ref 属性，为对应的标签添加引用的名称

  该名称不要重复，如果重复，获取到的是后面的 DOM

  <h3 ref="myH3"> Test.vue 根组件</h3>
  <p ref="myP">count from right {{ countFather }} </p>
  

• 在该组件实例的 $refs 对象上可以获取到 DOM

  即可对 DOM 进行需要的操作

  export default {
      methods: {
          printThis(){
              console.log(this)
              this.$refs.myH3.style.color = 'red'
              this.$refs.myP.style.color = 'blue'
          }
      }
  }
  

3. 使用 ref 引用组件实例

• 使用 ref 属性，为对应的组件**添加引用的名称 **xxx

• 可以通过 $refs.xxx 得到组件的实例

• 即可访问到 methods 中的方法以及 data 的数据

  <Right @numChange="getNewCount" ref="comRight"></Right>
  

  resetCount(){
      console.log(this.$refs.comRight)
      this.$refs.comRight.reset()
  }
  

4. 了解 this.$nextTick 应用场景

4.1 遇到的场景

<input type="text" v-if="inputVisible" @blur="showButton" ref="iptRef">
<button v-else @click="showInput">展示输入框</button>

showInput(){
    // 展示文本框
    this.inputVisible = true
    // 自动获得焦点
    this.$refs.iptRef.focus()
}

Cannot read properties of undefined (reading 'focus') 调用 focus 前面的是 undefined

原因： 当执行完 this.inputVisible = true ，data数据已经改变，将要对 ui结构进行更新，还处于 beforeUpdate 时期，此时 ui 结构还没有得到更新，页面中还没有 input 标签，当访问this.$refs.iptRef时，得到的就是 undefined。

4.2 解决方案

this.$nextTick(callback) ：将callback回调函数延迟到下一个 DOM 更新周期之后执行。

• 等组件的 DOM 更新完成之后，再执行 callback 回调函数。
• 从而能保证 callback 回调函数可以操作到最新的 DOM 元素。

4.3 为什么不用 updated

当 input 失去焦点时，data的数据也会发生变化，此时也会调用 updated 函数，但是此时 input 得DOM 结构已经被移除，会报错。