Javascript Vue组件中的无限更新循环

我的导航选项卡组件中出现以下更新错误时出现问题：

组件渲染函数中可能有一个无限更新循环

回顾前面的问题，大多数似乎与计算属性有关，或者直接修改传递到组件中的道具，迫使它们不断重新渲染。然而，在这个组件中，我认为我也没有尝试这样做

Vue.component('navigation-tabs', {
    props: {
        tabs: Array,
        title: String,
        type: String
    },
    data() {
        return {
            navigationTabs: Vue.util.extend([], this.tabs),
            selectedTab: {},
            tabCounter: 0,
            tabType: this.type ? this.type : 'tabs'
        }
    },
    methods: {
        navItemClasses(selectedTab) {
            if (selectedTab.selected) {
                if (this.type) {
                    return 'bg-gradient-dark text-white';
                }
            } else if (selectedTab.disabled === true) {
                return 'text-danger';
            }
        },
        selectTab(selectedTab) {
            if (selectedTab.disabled !== true) {
                this.navigationTabs.forEach(tab => {
                    tab.selected = false;
                });
                selectedTab.selected = true;
            }
        }
    },
    computed: {
        activeComponent() {
            return this.navigationTabs.filter(x => x.selected === true)[0]
        }
    },
    template: `
        <div>
            <div>
                <ul class="text-md nav" :class="tabType === 'tabs' ? 'nav-tabs' : 'nav-pills'">
                    <li v-for="(tab, index) in navigationTabs" class="nav-item card-img-holder" v-if="tab.hideForSite !== $parent.site">
                         <img src="/shared/resources/images/circle.svg" class="card-img-absolute">
                         <a class="nav-link font-weight-bold" :class="navItemClasses(tab)" @click="selectTab(tab)">
                         {{ tabCounter++ + ': ' + tab.name }}
                         </a>
                    </li>   
                    <h3 v-if="title" class="nav-link font-weight-bold ml-auto pb-0">{{ title }}</h3>
                </ul>
            </div>
            <div v-if="tabType !== 'tabs'" class="border-top my-3"></div>
            <div class="my-4 mx-5">
                <component :is="activeComponent.component"></component>
            </div>
        </div>
    `,
});

编辑： 最初我没有在模板中进行增量，而是调用了一个函数，但不明白为什么调用了600多次：

<a class="nav-link font-weight-bold" :class="navItemClasses(tab)" @click="selectTab(tab)">
    {{ retrievePosition() + ': ' + tab.name }}
</a>

    retrievePosition(){
        return this.tabCounter++;
    },

tabCounter++会在每次渲染组件时更新tabCounter，这会导致重新渲染并导致无限循环

如果需要计数器，则已经有索引值：

{{ (index + 1) + ': ' + tab.name }}

在组件模板和渲染函数内部进行渲染时，请尽量避免产生副作用，因为这是一种可能导致无限循环的糟糕做法。如果需要持续执行副作用，则观察者、更新前和更新后的生命周期挂钩是合适的位置。

tabCounter++会在每次渲染组件时更新tabCounter，这会导致重新渲染并导致无限循环

如果需要计数器，则已经有索引值：

{{ (index + 1) + ': ' + tab.name }}

---

在组件模板和渲染函数内部进行渲染时，请尽量避免产生副作用，因为这是一种可能导致无限循环的糟糕做法。如果需要持续执行副作用，那么watchers、beforeUpdate和updated lifecycle挂钩是合适的位置。

我已经尝试过了，但是一些选项卡根据所选站点的不同而隐藏，因此我不能只向索引添加1，因为它将从4->6跳过。已经为我更改的内容添加了一个编辑，我仍然不明白为什么它会渲染数百次，这是我正在做的吗？您可以在输出选项卡之前过滤它们，这样索引将是正确的值。移动tab.hideForSite！==$检查computed属性的parent.site，与对activeComponent执行的方法相同。是的，这是你正在做的事情，tabCounter++让它像：var-tabCounter=0；函数render{var oldTabCounter=tabCounter；console.logtabCounter++；if oldTabCounter！==tabCounter render；}render；。试着运行它，你会得到无限循环，这可能会冻结你的浏览器。是的，这更有意义，谢谢。所以基本上每当我增加计数器时，它都会导致组件重新渲染，然后导致计数器再次增加，导致这些事件的循环发生？我只是想确保我的想法是正确的。我已经尝试过了，但是一些选项卡是隐藏的，这取决于所选的站点，所以我不能只向索引添加1，因为它将从4->6跳过。已经为我更改的内容添加了一个编辑，我仍然不明白为什么它会渲染数百次，这是我正在做的吗？您可以在输出选项卡之前过滤它们，这样索引将是正确的值。移动tab.hideForSite！==$检查computed属性的parent.site，与对activeComponent执行的方法相同。是的，这是你正在做的事情，tabCounter++让它像：var-tabCounter=0；函数render{var oldTabCounter=tabCounter；console.logtabCounter++；if oldTabCounter！==tabCounter render；}render；。试着运行它，你会得到无限循环，这可能会冻结你的浏览器。是的，这更有意义，谢谢。所以基本上每当我增加计数器时，它都会导致组件重新渲染，然后导致计数器再次增加，导致这些事件的循环发生？我只是想确定我的想法是正确的。