Question

我有一个带有两个观察者的Vue实例：

watch: {
    zone:function(zone) {
        console.log('Zone watcher');
        this.route = {};
    },
    route:function(route) {
        console.log('Route watcher');
        if(Object.getOwnPropertyNames(route).length === 0) {
            var _this = this;
            axios.get(route.url).then(function(response) {
                _this.tracks = response.data;
            });
        } else this.tracks = {};
    }
},

当用户选择区域时，路线（和轨道）将被重置。当用户选择路线时，会加载曲目；

我有一个接收zone和tracks作为道具的组件，还带有两个内部观察者，当这些道具中的任何一个发生变化时，它们都会执行一些独立的动作。

我还有一个方法可以更改两个变量：

jump:function(path) {
    var parts = path.split(',');
    this.zone = this.ZONES[parts[0]];
    this.route = this.zone.routes[parts[1]];
},

问题是首先触发了route的观察程序，然后zone的观察程序更改了route的值，再次触发了它的监视程序，将tracks的值重置为空对象。

是否有一种方法可以定义必须触发监视程序的顺序？

Answer 1

安德烈（Andrey）的评论显示了出路。这个问题归结于您用于什么工作的工具。不可避免地会有一些意见……watch是针对极端情况的。您不需要经常使用它，如果没有它，您可能应该这样做。 watch属于计算绑定和v-bind：它们是反应性的，仅使用它们表示屏幕上的状态，您对它们的运行时间没有（或几乎没有）控制，因此您不必理会。< / p>

服务器请求属于Vue（in your store perhaps）之外的方法或函数，在其中可以显式调用它。因此，创建一个changeZone（）函数以清除路由和跟踪，然后调用服务器，然后使用服务器响应更新数据（或存储）。如果将这些小的功能序列在一处明确指定，您的代码将更加清晰。您的序列触发应该可能是事件（用户操作）或生命周期挂钩，而不是手表。

Vuejs观察者订单

1 个答案: