javascript - watch 是异步的吗？

Question

我在 Vue 实例中观察变量 radioStatus:

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

引用自上面的链接:

Watchers

While computed properties are... This is most useful when you want to perform asynchronous or expensive operations in response to changing data.

在您上面的例子中，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;
        });
    });

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