Vuejs 观察者顺序

Question

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

\n\n

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

\n\n

当用户选择一个区域时，路线（和轨迹）将被重置。当用户选择路线时，加载轨迹；

\n\n

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

\n\n

我还有一个可以更改这两个变量的方法：\n

\n\n

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

\n\n

问题是watcher forroute首先被触发，然后watcher forzone更改route值再次触发其watcher，将tracks值重置为空对象。

\n\n

有没有办法定义必须触发观察者的顺序？

\n

Answer 1

安德烈的评论指明了方向。这个问题归结为你使用哪些工具来完成什么工作。不可避免地会有一些意见......watch是针对边缘情况的。您并不经常需要它，如果您可以不需要它，您可能应该这样做。watch属于计算和 v-bind：它们是反应性的，使用它们（仅）用于表示屏幕上的状态，您无法（或很少）控制它们何时运行，并且您不应该关心。

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