一分钟解决this.$refs.xxx 取值为undefined问题

刺骨的言语ヽ痛彻心扉 2022-12-11 13:35 117阅读 0赞

问题场景是这样，  
我们设定一个组件的ref = ‘a’，根据生命周期，我们是可以在mounted中访问的，但是`console.log(this.$refs.a)`是undefined，而我们`this.$refs`打印出来，这个a是存在的，这是为什么呢？

可能你还没有注意到，Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。  
具体查看官方文档的 [异步更新队列][Link 1]

因为我的使用场景这个**a**组件是条件渲染的，所以我们首先一定要在满足这个条件的时候调用，其次，我们也应该做一下异步处理，vue给我们提供了`vue.$nextTick()`这个API，官方给的解释是

> 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。  
> 2.1.0 起新增：如果没有提供回调且在支持 Promise 的环境中，则返回一个 Promise。请注意 Vue 不自带 Promise 的 polyfill，所以如果你的目标浏览器不原生支持 Promise (IE：你们都看我干嘛)，你得自己提供 polyfill。

所以这里我采用了异步函数async/await

async function (){
    	await this.$nextTick();
    	this.$refs.a  //操作a组件
    }

*  1
 *  2
 *  3
 *  4
 *  5

或者回调

this.$nextTick(function(){	
    	 //xxx	
    	 } );
    	
    }

*  1
 *  2
 *  3
 *  4
 *  5

这里不知道为什么， 我用回调没有反应，不知道bug还是有其他的奥妙

[Link 1]: https://cn.vuejs.org/v2/guide/reactivity.html#%E5%BC%82%E6%AD%A5%E6%9B%B4%E6%96%B0%E9%98%9F%E5%88%97