Vue 觀察者在 data() 變更中觸發

Question

<script>
export default {
  name: "DriversStandings",

  data() {
    return {
      standingsData: [],
    };
  },

  props: ["drivers", "isUpdated"],

  watch: {
    drivers: {
      deep: true,
      handler: function () {
        this.test();
      },
    },
  },

  methods:{
    test(){
      console.log("chamou o teste")
      this.standingsData = this.drivers
    }
  }
};
</script>

我有點瘋狂了。觀察者不應該只觀察「司機」道具嗎？當我編輯“standsData”時，它也會以某種方式觸發，使我無法對其進行排序。我錯過了什麼嗎？

Answer 1

這可能取決於您對數組的排序方式，但由於您分配了this.standsData = this.drivers ，因此對this.standsData 的任何變異更改也會變異this.drivers 下的數據，因為它們引用同一個陣列。您可能想要複製驅動程式陣列以放入元件狀態，如下所示：

  methods: {
    test() {
      console.log("chamou o teste")
      this.standingsData = [...this.drivers];
    }
  }

請記住，在this.standsData 中深度修改其他資料也會出現類似的問題，因為您在觀察器上指定deep: true ；如果您必須這樣做，則在將this.drivers 移到this.standsData 時，您需要深度複製資料。這可以使用自訂程式碼或 lodash.cloneDeep 等工具來完成。

這裡的另一個怪癖是，預設情況下，Vue 觀察者不會在元件初始化時觸發。如果您希望在drivers 屬性在元件初始化期間初始設定時發生變化時觸發它，則需要將immediate: true 新增至觀察程式（文件此處）。

  watch: {
    drivers: {
      deep: true,
      immediate: true,
      handler: function () {
        this.test();
      },
    },
  },