问题场景是这样,
我们设定一个组件的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) 代替。
具体查看官方文档的 异步更新队列

因为我的使用场景这个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还是有其他的奥妙

Logo

前往低代码交流专区

更多推荐