Question

我的Vuejs应用程序中有以下代码：我在我的应用程序中提供了一些初始数据：

const app = new Vue({
    router,
    store,
    mounted: function() {
        var that = this;
        $.get("/initial_data/", {}, function(data) {
            that.$store.dispatch('set_initial_data', data);
        });
    }
}).$mount('#app');

然后我有了这个组件：

var myComponent = Vue.component('root', {
    ...
    data() {
        return {
            counters: []
        }
    },
    computed: {
        ride() {
            if (this.$store.getters.data["rides"]) {
                const that = this;

                var limit = this.$store.getters.data["rides"][0]["Movements"].split(" : ");
                that.counters.push(0);
                console.log(that.counters);
                var counter1 = setInterval(function () {
                    that.counters.splice(0, 1, that.counters[0] + 1);
                }, 10000);
                return this.$store.getters.data["rides"][0];
            }
            else {
                return "";
            }
        },
        ...
    }
});

问题在于，当我没有反击1时，我只进入一次骑行功能。

当我添加counter1时，我对我的骑行功能进行了递归调用，我在控制台中得到了这个：

[0, __ob__: Observer]
all.js:196 [1, 0, __ob__: Observer]
all.js:196 [2, 0, 0, __ob__: Observer]
all.js:196 [3, 0, 0, 0, __ob__: Observer]
all.js:196 [4, 0, 0, 0, 0, __ob__: Observer]
all.js:196 [5, 0, 0, 0, 0, 0, __ob__: Observer]
all.js:196 [6, 0, 0, 0, 0, 0, 0, __ob__: Observer]
all.js:196 [7, 0, 0, 0, 0, 0, 0, 0, __ob__: Observer]

有人可以解释为什么会这样吗？

我希望仍然只能访问一次骑行功能。

Answer 1

这是因为您在变量setInterval上分配了counter1，并且每隔10k ms就会调用它。

在setInterval中，您正在更改counter，当发生更改时，计算属性ride将重新评估。

希望现在更清楚了。

为什么我在vuejs中有计算函数的递归调用？

1 个答案: