H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【Web前端问题】vue.js使用watch监听数据变化的问题

我在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 = [];
                    });
                }
            });
        });

回答:

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

回答:

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)    
    }

本文地址:H5W3 » 【Web前端问题】vue.js使用watch监听数据变化的问题

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址