vue.js 手表未更新

Question

我是 vue 的新手。 我現在正在嘗試根據另一個計算變量的變化來更新幾個變量。

這個計算變量從 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;
    },
  },
...

Answer 1

默認情況下， watch是淺的。 如果將新的 object 分配給lastAndMarkPrice ，則將調用處理程序，但它不會檢查該 object 中的屬性突變。

要創建一個深度觀察者，您需要執行以下操作：

watch: {
  lastAndMarkPrice: {
    deep: true,

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

https://v2.vuejs.org/v2/api/#watch

通常這將是正確的解決方案，但您的用例稍微復雜一些，因為您需要訪問舊值。 使用深度觀察器對此無濟於事，因為您只會通過相同的 object。

為了解決這個問題，您需要在某處復制舊值，以便您仍然可以將它們與新值進行比較。 一種方法是讓計算屬性獲取副本：

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的值發生變化時，它都會重新運行計算屬性並創建一個新的 object。 這將觸發watch處理程序，重要的是，您將獲得兩個不同的對象作為舊值和新值傳遞。 在這種情況下，您不需要使用deep ，因為 object 本身正在發生變化，而不僅僅是其中的屬性。

你也可以用...縮短一點

return { ...prices }

...而不是顯式地復制這兩個屬性。