Vue-Beobachter feuern auf data()-Änderungen

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>

Ich werde ein bisschen verrückt. Sollte der Beobachter nicht nur die Requisite „Fahrer“ beobachten? Wenn ich „standsData“ bearbeite, wird es auch so ausgelöst, dass ich es nicht sortieren kann. Habe ich etwas verpasst?

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();
      },
    },
  },