Vue.js 发生父级更新时，发出事件的子级冻结UI

我有一只很奇怪的虫子 我有一个组件，可以找到所有可能的客户端，并向父级发送更新（只有一个数字）。 如果我不发射，子组件将立即更新。但如果将该值发送给父级，则会将UI冻结约3秒钟

“我的孩子”组件方法

  calculerRecetteGlobale() {
 let recetteService = new RecetteService(
                    this.form.recetteService, this.form.dateEvenement
                );

                let recetteFinancement = new RecetteFinancement(
                    this.form.recetteFinancement, this.form.dateEvenement
                );

                let recetteLocation = new RecetteLocation(
                    this.form.recetteLocation, this.form.dateEvenement
                );

                this.form.dataRecetteGlobale = [];

                for (let i = 0; i < this.data.length; i++) {

            // Does the filtering of client

                    }

                const nb = this.form.dataRecetteGlobale.length;

                this.$emit('onCalculatedRG', nb)
}

---

如果我使用console.log（number）而不是使用this.numberreceteglobale，那么一切工作都很流畅，所以更新需要花费很多时间，我不知道为什么。我真的怀疑确定数字的处理是否是UI冻结的原因，因为如果我不向父组件发出

似乎父组件在其依赖项中有一些繁重的计算，并且当

numberreceteglobale

更改时会触发这些计算。这怎么可能？我的意思是，我改变了计算dRG的方法，只使用了``this.form.test=this.form.test+1；this.$emit（'onCalculatedRG'，this.form.test）；`数据中的

this.form.test=0

，并且在父更新时UI仍然冻结。您是对的。问题在于其他一些功能甚至与此职位无关。当更新子组件时，出于某种原因，它会触发一个名为caculateModel的父方法。它不只是为更新的子级触发方法，而是为20个父级子级中的每个子级触发方法。那是一种奇怪的行为。我想我会再创建一个线程。非常感谢。Vue.js仍然非常新

  <div class='mr-4 ml-4 row'>
       {{this.numberRecetteGlobale}
  </div>
 <div class="row mt-4 w-100 fmt-card">
   <option-form 
        @onCalculatedDistance="onCalculatedDistance"
        @onCalculatedRG="onCalculatedRG"
        :allDistance="distance" 
        :annee="optionsAnnee"
        :filter-marque="valueMarque" 
        :documentHeader="documentHeader"
        :filter-modele="valueModele" 
        :data="grid.data">
  </option-form>
</div>

  onCalculatedRG(number) {
                this.numberRecetteGlobale = number;
            },