在 Vue2 里如何实现“一边计算，一边更新页面元素”这样的功能

[abcbuzhiming]

我估计应该是我想的方向不太对，放狗了好久也没找到答案。实际效果并不复杂，页面上有一个按钮和一个简单的数字 v-text ，点击按钮，按钮绑定的方法会把一个变量累加 n 次，要求每累加一次，页面就更新一次并显示出来，然而实际操作发现不行，按钮绑定的 method 会把 n 一次累加完，然后页面才会刷新显示出来，因此我看不到累加过程，只能看到最终结果，最开始发现 Vue2 有一个$forceUpdate()方法能强制刷新，但是实际使用毫无效果

[abcbuzhiming]

@maplerecall 就从文档上来说，没看出 nextTick 这个方法要怎么用在我这种场景

[abcbuzhiming]

@coolzjy 难道就没有一种机制强制浏览器刷新 dom 吗

[wly19960911]

@abcbuzhiming
不要用后台那套来看前台，就算可以，那么意味着这套操作执行很慢，然后如果各相同种操作呢，这只是更新页面而已，还不够复杂，工作量再大一点用户直接崩溃了。

实际上是你需要让动画堵塞-执行-堵塞，看看 async 和 generator 应该能解决。

[abcbuzhiming]

@maplerecall 其实我奇怪的是这一点， 60 帧那个问题很好理解，我有做过游戏开发，但是“非异步代码执行完前不能刷新 Dom ”这点，是为什么呢，是浏览器机制限制？ JavaScript 语言机制限制？因为我以前开发游戏的时候，某些引擎是可以在同步代码里强制刷新当前帧的

[finian]

@abcbuzhiming #24 Vue.js 在一次 tick 中操作一次 dom （ diff, update ...），框架就是这么设计的。如果你非要即时刷新 dom ，你就直接操作 dom （ e.g. `node.innerHTML = xxx`），但是上面的同学都提到了，这个计算很快，你是看不到变化过程的。如果你是按照 Vue.js 的套路来玩的话，要做的事情就是让这个变量以一定间隔变化（不能太快），反映到视图上就是一个变化的“动画”过程。

[finian]

@abcbuzhiming #24 https://jsfiddle.net/7adxh5pd/

[yihouzenmeban]

@ferrum #14 为什么要用 $forceUpdate 呀。。本身就是双向绑定的。。改变 data 就直接改变 view 层了诶。。（实测不用 $forceUpdate 也可以的

[xmflswood]

https://cn.vuejs.org/v2/guide/reactivity.html#异步更新队列
楼主看看这里吧

[xmflswood]

看看异步更新队列那一节

[maplerecall]

@abcbuzhiming 非异步代码执行完前不能刷新 dom 这点是现在浏览器共同的做法， dom 重绘的开销非常大，所以在一段非异步代码内所有的 dom 操作只有在这段代码结束后才会渲染，目前并没有浏览器提供在当前强制重绘的接口，因为没有意义， js 是单线程的，你想把每次修改都反应出来又不想阻塞主进程，那就只能把所有操作都写成异步的，但即使异步中每次操作都修改了 dom 浏览器也不会马上刷新，也会等到下一个 frame 才重绘，如果你只是不想写 setTimeout 或者回调嵌套的话就用 async 直接把异步按照同步的方法来写。

[Sapp]

实际上你修改了 他就会刷新啊，只要你加上间隔，让人眼可见不就可以了吗？这个和 vue 也没啥关系。

[kaneg]

Javascript 是单线程，计算方法没有退出之前 UI 是没机会更新的

[445141126]

@kaneg js 里面还是可以强制同步重新渲染的 https://gist.github.com/paulirish/5d52fb081b3570c81e3a

[hst001]

现在好多前端框架主要就是解决这个问题来提供渲染性能的，你是逆行，可行的方法每加 1 就要手动更新一次 dom

[xieranmaya]

大哥，你对 n 的操作是同步的吧？？