Question

我在radioStatus个实例中观察变量Vue：

watch: {
    radioStatus: function(val) {
      if (!this.discovery) {
        $.ajax({ url: '/switch/api/radio/' + (val ? 'on' : 'off') })
      }
    }

可以在页面重新加载时触发的AJAX调用中进行修改：

$.ajax({
  url: "/api",
  cache: false
})
  .done(function(response) {
    vm.discovery = true;
    vm.radioStatus = response.radio.ison;  // <-- the change I mention below is here
    vm.discovery = false;
  });

我可以假设radioStatus更改触发的所有方法都会在转到下一行（即vm.discovery = false）之前完成吗？

我关心的是vm.discovery是一个由多个观察变量使用的标志（与radioStatus相同），并且它将在观察变量的功能完成之前翻转。

Answer 1

是的，观察者是异步的。参考：https://vuejs.org/guide/computed.html#Watchers

引自上面的链接：

<强>俪

虽然计算属性是...... 当您想要执行异步或昂贵的操作以响应更改数据时，这非常有用。

在上述情况下，vm.discovery = false;将在进入watch之前完成。如果您将vm.discovery设置为false，则radioStatus内的ajax调用将始终执行。

为避免这种情况，您可以尝试vm.$nextTick()，如下所示：

$.ajax({url: "/api", cache: false})
    .done(function(response) {
        vm.discovery = true;
        vm.radioStatus = response.radio.ison;
        vm.$nextTick( () => {
            console.log("Setting vm.discovery to false");
            vm.discovery = false;
        });
    });

这又是一个棘手的事情 - 因为radioStatus()中的watch回调也只会在nextTick中发生。但假设watch由前一行本身（vm.radioStatus = ...）触发，从技术上讲它应首先进入队列，因此更早完成。您必须使用一系列console.log语句进行确认。

手表是异步的吗？

1 个答案: