Vue.js 组件重新渲染无限循环

Question

我正在尝试根据先前组件的一些选定属性构建 tables：我正在渲染一个名为“branch-comparison”的组件来比较 XML 文件及其属性和值。该组件接受两个道具：

selectedEnvs: 具有名称和对象的对象数组

commonFiles：具有名称和对象的文件数组

我正在使用 vue-tables-2 来构建这些 tables。在模板的顶部，它运行一个名为 getProps() 的函数来从每个文件生成一组所有可能的属性。我已经硬编码 0 因为目前我只让用户一次选择 1 个文件。然后它遍历每个文件（只有 1 个）并获取主要 table 和比较 table 的数据。它们实际上具有相同的功能（getHeadData 和 getTableData），但我暂时将它们分开以便进一步定制。代码对于实际生成 tables 并不重要，但是它们内部的某些东西导致我的代码进入无限循环。

在组件的 初始渲染 上，永远不会出现无限循环。一切都在运行，并且根本没有中断并且工作得很好。然而，一旦组件被渲染，并且我对道具进行了更改，或者甚至只是将文件保存在编辑器中并且 vue-cli 热重新加载它，它就会进入无限循环。所有数据仍然可以正常生成，并且组件按预期运行。但是无论如何循环101次。

我调查过的事情：

更改数据：我完全理解组件在数据更改时重新呈现...但是我不相信我在任何方法调用中更改任何反应数据。我只是在函数内部声明它并将它返回给那个临时变量。另外，如果是这种情况，我相信它会 在初始组件加载时进入无限循环 ，但事实并非如此。它仅在刷新或道具更改时进入无限循环。

改变 Vuex 状态：我调查了这个，但我从不改变任何东西的状态。我只是在 getTableData 和 getHeadData 方法中访问它。然后我想，也许分配一个变量指向这个状态对象会导致它根据访问状态的东西重新渲染，所以我尝试而不是

this.$store.state.branchesToCompare[branchIdx].obj[env.name].app_config[this.commonFiles[fileIdx]].forEach(envProp
=> {

使用

var x = JSON.parse(JSON.stringify(this.$store.state.branchesToCompare[branchIdx].obj[env.name].app_config[this.commonFiles[fileIdx]])

然后

x.forEach(envProp =>

但这仍然不起作用。

如果我注释掉调用 getHeadData() 和 getTableData() 的代码，它会循环适当的次数。

这是代码。我对 Vue 还是个新手，所以我很乐意接受任何更一般的建议：

 <template>
   <div id="BranchComparison">
      <div :set="info = getProps(0)">
         <div class="file" v-for="(file, fileIdx) in commonFiles" :key="(file, fileIdx)">
            <h3>{{ file }} </h3>
            <b-row :set="mainTable = getHeadData(fileIdx, info.props, info.columns)">
               <b-col class="mainBranch">
                  <h5 class="fileName"> {{ $store.state.branchSelection.split('.').slice(0, -1).join('.') }} <span style="font-size: 14px;">vs </span> </h5>
                  <v-client-table
                     :data="mainTable.data"
                     :columns="mainTable.columns"
                     :options="mainTableOptions"
                     size="small"
                  ></v-client-table>
               </b-col>
               <b-col class="compareBranch" v-for="(branch, branchIdx) in $store.state.branchesToCompare" :key="(branch, branchIdx)">  
                  <h5> {{ branch.name.split('.').slice(0, -1).join('.') }} </h5>
                  <v-client-table
                     :set="temp = getTableData(fileIdx, branchIdx, info.props, info.columns, mainTable)"
                     :data="temp.data"
                     :columns="temp.columns"
                     :options="temp.options"
                     size="small"
                  ></v-client-table>
               </b-col>
            </b-row>
         </div>
      </div>
   </div>
</template>

<script>

export default {

   props: ['selectedEnvs', 'commonFiles'],

   data(){
      return{
         mainTableOptions:{
            filterable: false,
            filterByColumn: false,
            perPage: 200,
            pagination: {
               show: false,
               dropdown: false
            },
            sortable: [''],
            resizableColumns: false,
         },
      }  
   },

   methods: {
      getTableData(fileIdx, branchIdx, props, columns, mainTable){

         var data = []

         var compareTableOptions = {
            filterable: false,
            perPage: 200,
            pagination: {
               show: false,
            },
            sortable: [''],
            hiddenColumns: ['Property'],
            resizableColumns: false,
            cellClasses: {}
         }


         props.forEach(prop => {
            var temp = { Property: prop }
            this.selectedEnvs.forEach(env => {
               var found = false;
               this.$store.state.branchesToCompare[branchIdx].obj[env.name].app_config[this.commonFiles[fileIdx]].forEach(envProp => {
                  if(envProp){
                     if (prop == envProp["@name"]) {
                        compareTableOptions.cellClasses[env.name] = []
                        compareTableOptions.cellClasses[env.name].push({
                           class: 'same',
                           condition: row => {
                              try{
                                 return row[env.name] == mainTable.data[i][env.name]
                              } catch{
                                 console.log('This is a different problem ')
                              }
                           }
                        })
                        found = true;
                        temp[env.name] = envProp["@value"]
                     }
                  }
               });
               if (!found){
                  temp[env.name] = 'Not found'
               } 
            })
            data.push(temp)
         });

         return {
            columns: columns,
            data: data,
            options: compareTableOptions
         }
      },

      getHeadData(fileIdx, props, columns){
         var data = []
         props.forEach(prop => {
            var temp = { Property: prop }
            this.selectedEnvs.forEach(env => {
               var found = false;
               this.$store.state.jsonObject[env.name].app_config[this.commonFiles[fileIdx]].forEach(envProp => {
                  if(envProp){
                     if (prop == envProp["@name"]) {
                        found = true;
                        temp[env.name] = envProp["@value"]
                     }
                  }
               });
               if (!found){
                  temp[env.name] = 'Not found'
               } 
            })
            data.push(temp)
         });

         return {
            columns: columns,
            data: data
         }
      },

      getProps(fileIdx){

         if(this.commonFiles.length == 0) return

         var columns = ['Property']
         var props = new Set()

         this.selectedEnvs.forEach((env, idx) => {
            columns.push(env.name)
            this.$store.state.branchesToCompare.forEach(branch => {
               branch.obj[env.name].app_config[this.commonFiles[fileIdx]].forEach(prop => {
                  if(prop){
                     props.add(prop["@name"])
                  }
               })
            });
            this.$store.state.jsonObject[env.name].app_config[this.commonFiles[fileIdx]].forEach(prop => {
               if(prop){
                  props.add(prop["@name"]);
               }
            });
         });

         var ret = { props: props, columns: columns }

         return ret;
      }
   }
}

</script>

Answer 1

我已经解决了。上面的代码实际上没问题。在我发布代码之前不久，我在 v-for 和 getHeadData() 中使用了一个计算属性，我认为发生的事情是它是一个嵌套的计算属性，然后内部循环重新计算它，然后再次尝试外部循环，依此类推。我仍然对为什么它在初始渲染上起作用感到困惑，但是哦，好吧。现在正在运行。

Vue.js 组件重新渲染无限循环

Vue.js infinite loop on component re-render

javascript

vue.js

vuex

vue-tables-2