时间戳

首页 > 解决方案 > Vuejs 观察者命令

javascript - Vuejs 观察者命令

问题描述

我有一个带有两个观察者的 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]];
},

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

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

标签： javascriptvue.jsvuejs2watch

解决方案

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

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

推荐阅读