Vuejs 观察者命令

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 属于 computed 和 v-bind：它们是反应式的，（仅）使用它们来表示屏幕上的状态，您无法（或很少）控制它们何时运行，您不应该关心。

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