vue.js手表未更新

提问者：小点点

我是新来的。我现在尝试根据另一个计算变量的变化来更新两个变量。

这个计算变量从Vuex存储中获取值，并正常工作。我看到价值观改变了。为了计算派生变量，我创建了一个手表，它监视计算出的变量，然后更新这些派生值。该表在启动期间被调用两次，然后不再被调用，尽管计算出的值不断更新。我做错了什么。

这起作用了:

...
computed: {
    lastAndMarkPrice() {
      return store.getters.getLastAndMarkPriceByExchange(
        "deribit",
        store.getters.getAsset
      );
    },
...

此部分不工作:

...
data: () => ({
    lastPriceUp: false,
    lastPriceDn: false,
    markPriceUp: false,
    markPriceDn: false,
  }),
...
watch: {
    lastAndMarkPrice (newValue, oldValue) {
      console.log(newValue, oldValue);
      this.lastPriceUp = newValue.lastPrice > oldValue.lastPrice;
      this.lastPriceDn = newValue.lastPrice < oldValue.lastPrice;
      this.markPriceUp = newValue.markPrice > oldValue.markPrice;
      this.markPriceDn = newValue.markPrice < oldValue.markPrice;
    },
  },
...

共1个答案

匿名用户

默认情况下，监视是浅表的。如果将一个新对象分配给LaStandMarkPrice，那么将调用处理程序，但它不会检查该对象中属性的突变。

要创建一个深度观察者，您可以做如下操作:

watch: {
  lastAndMarkPrice: {
    deep: true,

    handler (newValue, oldValue) {
      // ...
    }
  }
}

https://vuejs.org/v2/api/#观察

通常这是正确的解决方案，但是您的用例稍微复杂一些，因为您需要访问旧值。使用深度观察者对此无济于事，因为你只会被传递相同的对象。

为了解决这个问题，您需要在某个地方复制旧值，这样您仍然可以使用它们与新值进行比较。这样做的一种方法是让计算属性获得一个副本:

computed: {
  lastAndMarkPrice() {
    const prices = store.getters.getLastAndMarkPriceByExchange(
      "deribit",
      store.getters.getAsset
    );

    // I'm assuming that prices is initially null or undefined.
    // You may not need this bit if it isn't.
    if (!prices) {
      return null;
    }

    return {
      lastPrice: prices.lastPrice,
      markPrice: prices.markPrice
    }
  }
}

使用上面的代码，每次lastprice或markprice的值更改时，它将重新运行计算属性并创建一个新对象。这将触发watch处理程序，而且重要的是，您将获得作为旧值和新值传递的两个不同对象。在这种情况下，您不需要使用deep，因为对象本身正在改变，而不仅仅是其中的属性。

你也可以用。。。

return { ...prices }

。。。而不是显式地交叉复制这两个属性。