vue.js使用watch监听数据变化的问题

Question

我在vue data里声明了一个specIndex的变量，然后我通过for改变specIndex的值，结果只能检测到for最后一次改变值得变化。
例如下面的写法，specIndex的值从1变成3，但是只能检测到最后一次specIndex等于3，请问大神我该如何处理，或者有其它方法实现类似的功能！

            for(var i=0;i<=3;i++){
                app.specIndex=i;
            }

        app.$watch('specIndex', function (newVal, oldVal) {
            var select2 = $("#Spec" + newVal).select2({ theme: "classic", placeholder: "请选择规格" });
            $(app.specListBox).each(function (i, item) {
                if (item.index == newVal) {
                    item.select2 = select2;
                    item.select2.on("change", function (e) {
                        var SepcValue = e.target.value;
                        item.SelectedparaValue = [];
                    });
                }
            });
        });

Answer 1

因为watch多次触发，只有一次推入事件循环队列
异步更新队列

Answer 2

https://cn.vuejs.org/v2/guide...

可能你还没有注意到，Vue 异步执行 DOM 更新。只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会一次推入到队列中。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。

我看文档有跟这个有关的说法。

直接一个for循环修改值太快了,试一下用setTimout延迟变化？比如

    for(var i=0;i<=3;i++){
        (function(j){
          setTimeout(function(){
             app.specIndex = j;
          },100*j)
        })(i)    
    }