Les observateurs Vue se déclenchent sur les modifications 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>

Je deviens un peu fou. L'observateur ne devrait-il pas uniquement observer l'accessoire « conducteur » ? Lorsque je modifie "standsData", cela se déclenche également d'une manière qui m'empêche de le trier. Ai-je manqué quelque chose?

Answer 1

Cela peut dépendre de la façon dont vous avez trié le tableau, mais puisque vous avez attribué les données sous this.standsData = this.drivers ，因此对 this.standsData 的任何变异更改也会变异 this.drivers, elles font référence au même tableau. Vous souhaiterez peut-être copier le tableau de pilotes pour le mettre dans l'état du composant comme ceci :

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

N'oubliez pas que lorsque this.standsData 中深度修改其他数据也会出现类似的问题，因为您在观察器上指定 deep: true ；如果您必须这样做，则在将 this.drivers 移动到 this.standsData vous devez profondeur copier les données. Cela peut être fait à l'aide d'un code personnalisé ou d'outils tels que lodash.cloneDeep.

Une autre bizarrerie ici est que, par défaut, les observateurs Vue ne sont pas déclenchés lors de l'initialisation du composant. Si vous souhaitez ajouter au watcher drivers 属性在组件初始化期间初始设置时发生变化时触发它，则需要将 immediate: true (documentation ici).

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