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