分享程序员开发的那些事...
更新时间：2022-10-15 16:11:46
实际上我想将其标记为重复 - 但后来我意识到大多数解决方案都建议使用 setTimout - 这正在创建一个javascript 和浏览器渲染之间不需要的竞争条件.
当您在 vue 范围内改变对象属性时(意味着它们是反应性的)并且您想等待 dom 更新和 dom 渲染，您可以执行以下操作:
首先 await vm.$nextTick() 它将计算 dom然后用 double requestAnimationFrame 给浏览器喘息的时间.
作为一个实现示例:
Vue.skipFrame = function(){返回新的承诺(解决 => {requestAnimationFrame(() =>请求动画帧(解决))})}让应用程序 = 新 Vue({el: '#app',数据: {怪物:10，英雄:100},方法: {攻击() {this.monster = Math.max(this.monster - (Math.random() * 10)|0,0)this.checkWin()},异步 checkWin(){等待这个.$nextTick()等待 Vue.skipFrame()if(this.monster == 0){确认('你赢了！又一次?')?this.start():this.quit()}},开始() {this.hero = 100;this.monster = 100;},退出(){this.monster = 1000;}}});.as-console-wrapper{高度:0px！重要}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="应用程序"><h1>怪物生命值:{{monster}}</h1><h1>英雄生命值:{{hero}}</h1><button @click="attack">Attack</button>