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() 函数来清除路线和跟踪，然后调用服务器，然后使用服务器响应更新您的数据（或存储）。如果这些小功能序列在一个地方明确指定，您的代码将更加清晰。您的序列的触发器应该可能来自事件（用户操作）或生命周期挂钩，而不是手表。

Vuejs 观察者命令

Vuejs watcher order

javascript

vue.js

vuejs2

watch