Vuejs for 循环内如何更新页面状态

› Vue.js

This topic created in 3183 days ago, the information mentioned may be changed or developed.

在点击按钮触发一个 for 循环事件

that.progress = xxx

that.progress = Math.ceil((i / fileNumber) * 100)

dom 中没有刷新状态，

console.log(that.progerss)

是正常的

因为这不是对象也不是数组的，不知道为啥会这样

let that = this
let filePath = that.filePath
let fileNumber = that.filesNumber
let files = that.files
let i = 0
async.whilst(() => {
        return i < fileNumber
    },
    (callback) => {
        let newPath = path.normalize(files[i]).replace(path.normalize(filePath), path.normalize("C:\\Users\\xxx\\xxx"))
        fs.copySync(files[i], newPath)
        i++

        that.progress = Math.ceil((i / fileNumber) * 100)
        console.log(that.progress)
        callback()
    },()=> {
        alert('ok')
    })

Supplement 1 · Aug 24, 2017

最终用了一个比较尴尬的方法解决

```
async.whilst(() => {
return i < fileNumber
},
(callback) => {
let newPath = path.normalize(files[i]).replace(path.normalize(filePath), path.normalize("C:\\Users\\hoyt\\Desktop\\webs2\\"))
fs.copySync(files[i], newPath)
i++
that.progress = Math.ceil((i / fileNumber) * 100)
that.$nextTick(() => {
setTimeout(() => {
callback()
},0)
})

}, () => {
alert('ok')
})
```
在 nextTick 中使用 settimeout 0 后再执行下一次循环
```
that.$nextTick(() => {
setTimeout(() => {
callback()
},0)
})
```

Supplement 2 · Aug 24, 2017

v2ex 只有主题里面才能用 markdown 吗？

最终在 nextTick 结束后使用 settimeout 0 触发下一次循环有效

for

vuejs

DOM

19 replies • 2017-08-24 11:52:51 +08:00

littlepanzh

Aug 24, 2017

talk is cheap, show me your code

hoythan

Aug 24, 2017

@littlepanzh 就是 for 循环里面修改参数，console 显示正常，dom 不刷新

SourceMan

Aug 24, 2017

Vue.set()

hoythan

Aug 24, 2017

@SourceMan 我这不是数组对象呀？

hoythan

Aug 24, 2017

@SourceMan 我先试一下

hoythan

Aug 24, 2017

@SourceMan 果然不行

66beta

Aug 24, 2017

如果 console.log 都看到变化了，应该没毛病
watch 下看看呢

hoythan

Aug 24, 2017

@66beta watch 只有触发了一次

Lothar

Aug 24, 2017

一个循环里的更新，统一被放在一个缓存队列里，循环结束后一起更新。你想啊，如果不这么做，一个循环你的页面不就崩了。

Lothar

Aug 24, 2017

> In case you haven ’ t noticed yet, Vue performs DOM updates asynchronously. Whenever a data change is observed, it will open a queue and buffer all the data changes that happen in the same event loop. If the same watcher is triggered multiple times, it will be pushed into the queue only once. This buffered de-duplication is important in avoiding unnecessary calculations and DOM manipulations. Then, in the next event loop “ tick ”, Vue flushes the queue and performs the actual (already de-duped) work. Internally Vue tries native Promise.then and MutationObserver for the asynchronous queuing and falls back to setTimeout(fn, 0).

hoythan

Aug 24, 2017

@Lothar 所以我要实现的话是不是得直接自己修改 dom 比较好一点？

hoythan

Aug 24, 2017

@Lothar 好像是我想多了，直接修改 dom 为啥也不会改变 555

document.getElementById('xxx').innerHTML

loveyu

Aug 24, 2017 via Android

Var.nextTick

hoythan

Aug 24, 2017

@loveyu
that.progress = Math.ceil((i / fileNumber) * 100)
Vue.nextTick()

还是无法刷新 dom，循环结束才更新

qiqico

Aug 24, 2017

试试 this.$forceUpdate() ?

maplerecall

Aug 24, 2017

用$forceUpdate 试试，另外如果循环操作阻塞了主线程也是不会更新 dom 的

hoythan

Aug 24, 2017

@qiqico
@maplerecall

看来真的是阻塞了主线程，我的异步用的方法可能不对

jin5354

Aug 24, 2017

你想在每次循环时都更新 DOM，制造一种高频率渲染的效果？
用 requestAnimationFrame 循环来写异步

jin5354

Aug 24, 2017

你即使用 for 循环直接改 DOM 也没用，且不说 vue 自带事件队列，每个 tick 里的数据变动会做合并。你一个 for 循环在一个 eventloop 的 task 里就跑完了，最多就渲染一次 DOM。必须把 for 任务用 requestAnimationFrame 打碎到每一帧里