vue infinite update loop bug All In One

vue infinite update loop bug All In One

You may have an infinite update loop in a component render function.

bug

v-show 的过滤方法中包含有更改属性的副作用操作，导致组件重新渲染，陷入死循环 ❌

    <template v-if="isShowDeepBid">
        <el-form-item class="is-required" label="深度优化方式">
            <el-radio-group
                v-model="ruleForm.deepBidType"
                @change="deepBidTypeChange">
                <el-radio-button
                    v-for="(item, i) in budgetDicts.deepBidTypeList"
                    :key="getUniqueKey(i)"
                    :label="item.value"
                    v-show="isDeepBidTypeDisabled(item.value)">
                    {{item.name}}
                </el-radio-button>
            </el-radio-group>
        </el-form-item>
    </template>

solution

动态生成，要渲染的 list, 而不是使用 v-show 控制是否展示 ✅

    <template v-if="isShowDeepBid">
        <el-form-item class="is-required" label="深度优化方式">
            <el-radio-group
                v-model="ruleForm.deepBidType"
                @change="deepBidTypeChange">
                <el-radio-button
                    v-for="(item, i) in deepBidTypeList"
                    :key="getUniqueKey(i)"
                    :label="item.value">
                    {{item.name}}
                </el-radio-button>
            </el-radio-group>
        </el-form-item>
    </template>

    computed: {
        deepBidTypeList () {
            return this.budgetDicts.deepBidTypeList.filter(obj => this.isShowDeepBidType(obj.value)) ?? [];
        },
    },

    // 深度优化方式 过滤
    isShowDeepBidType (deepBidType) {
        const isAutoOptimization = deepBidType === 'SMARTBID';
        const isAuto = deepBidType === 'DEEP_BID_PACING';

        const isConvert = true;
        const isEveryOne = this.ruleForm.convertDataType === 'EVERY_ONE';

        const isSmartAuto = this.ruleForm.smartBidType === 'SMART_BID_CONSERVATIVE';
        const isPayOrNextDay = (this.ruleForm.deepConvertTarget === 'AD_CONVERT_TYPE_PAY' || this.ruleForm.deepConvertTarget === 'AD_CONVERT_TYPE_NEXT_DAY_OPEN');

        if (isConvert && isSmartAuto && isAutoOptimization && !isEveryOne && isPayOrNextDay) {
            // 副作用 bug / side effect bug ❌
            this.ruleForm.deepBidType = 'SMARTBID';
            return true;
        }
        if (isConvert && isSmartAuto && isAuto && !isEveryOne && !isPayOrNextDay) {
            this.ruleForm.deepBidType = 'DEEP_BID_PACING';
            return true;
        }
        return false;
    },

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 ️，侵权必究⚠️！

---