使用ref和refs获取DOM元素和组件方法,使用$nextTick解决Vue异步更新的逻辑下无法获取DOM的问题

一.ref和$refs

利用ref和$refs可以用于DOM元素或者组件实例的获取
其特点是查找的范围仅限于当前组件中,具有更精确和稳定的优点

步骤

• step1:给目标标签或组件添加ref属性
• step2:在合适的时候(DOM渲染完毕的时候)通过this.$refs.xxx获取目标标签或目标组件(以调用目标组件的方法)

1.使用ref和$refs获取DOM元素

示例

//html
<div ref="wineTag">把酒问青天</div>
<button ref="btn">提交</button>//js
mounted(){console.log(this.$refs.wineTag.innerHTML);//把酒问青天this.$refs.btn.disabled=true;//禁用此按钮
}

2.使用ref和$refs获取组件

子组件:BaseRef.vue

//html
<div><h3>我是计数器--{{count}}</h3><button @click=increment>点击增加</button>
</div>
//js
data(){return{count:0,config:{min:0,max:10}}
},
methods:{increment(){if(this.count<this.config.max) this.count++;},resetCounter(){this.count=this.config.min;},changeMax(){this.config.max=15;}
}

父组件:App.vue

//html
//step1:通过ref标记目标组件
<base-ref ref="baseRef"></base-ref>
<button @click="getChildData">获取子组件数据</button>
<button @click="getChildResetMethod">重置计数器</button>
<button @click="getChildChangeMethod">修改最大值</button>
//js
methods:{//step2:通过$refs调用目标组件上的方法getChildData(){console.log(this.$refs.baseRef.count);//当前计数console.log(this.$refs.baseRef.config.min);//配置参数--最小值console.log(this.$refs.baseRef.config.max);//配置参数--最大值},getChildResetMethod(){this.$refs.baseRef.resetCounter();//重置计数器},getChildChangeMethod(){this.$refs.baseRef.changeMax();;//修改计数器上限}
}

二.$nextTick的介绍和使用场景

1.通过常见示例引出概念

• 需求
  v-if==>标题文字和"编辑"按钮,点击后它们会消失,同时渲染v-else
  v-else==>input文本框,要求让input出现的同时自动获得焦点
• 初步逻辑

//显示输入框:
this.isShowEdit=true;
//获取焦点
this.$refs.inp.focus();//在input上绑定ref="inp"

• 出现问题
  input成功被渲染,但无法自动获得焦点
  此时获取不到inp,打印出来是undefined
• 原因分析
  Vue出于提升性能的考量,是异步更新DOM的,此时input标签的DOM并未被渲染出来
  (验证:在浏览器控制台的Element中,元素还是标题文字和编辑按钮这两个元素,没有input元素)
• 解决方法
  使用$nextTick

2.$nextTick介绍

• 作用:等DOM更新后,才会执行其函数体
• 语法:this.$nextTick(函数体)
• 示例

this.$nextTick(()=>{this.$refs.inp.focus();
});

• 解释
  $nextTick会等DOM更新完毕,然后马上执行其函数体
• 上例完整代码

//html<!-- 因为ref要绑定在v-if控制的元素下 --><div id="one" v-if="isShowEdit"><input type="text" ref="inp"></div><!-- 所以把默认状态写在v-else中 --><div id="two" v-else><span>我是标题</span><button @click="handleEdit">编辑</button></div>
//js
data:isShowEdit:false
methods:handleEdit(){this.isShowEdit=true;this.$nextTick(()=>{this.$refs.inp.focus();});}

踩坑:ref必须直接绑定在v-if控制的元素上

• 总结
  .
  • vue是异步DOM更新的
  • 想在DOM更新完成后做某件事,就使用$nextTick

三.拓展

在上例中,使用$nextTick是为了等DOM更新完毕,
在此逻辑下,可以预料到,使用延时器或者在updated()钩子函数也能解决该问题

1.使用setTimeout处理异步更新

setTimeout(()=>{this.$refs.inp.focus();
},1000);//时间也可以改成0,但缺点仍存在
//结果:1s后input获得焦点

缺点:等待时长是不确定的(延迟时间不可控)

2.使用updated()钩子函数处理异步更新

methods:{handleEdit(){this.isShowEdit=true;// this.$nextTick(()=>{//   // console.log(this.$refs.inp);//   this.$refs.inp.focus();// });}
},
updated(){this.$refs.inp.focus();//成功获取焦点
}

缺点:

• 每次数据变化都会触发,需要额外状态判断
• 无法保证子组件已完成更新

3.总结三种方案的优缺点

方法	执行阶段	可靠性	代码耦合度	性能影响
this.$nextTick	微任务队列	高	低	最优
updated钩子	更新周期内	中	中	中等
setTimeout(fn,0)	宏任务队列	中	高	较差