Vue代碼優化

時間 2019-11-17

標籤 vue 代碼優化简体版

原文原文鏈接

1.v-for 遍歷避免同時使用 v-if

v-for 比 v-if 優先級高，若是每一次都須要遍歷整個數組，將會影響速度，尤爲是當之須要渲染很小一部分的時候，必要狀況下應該替換成 computed 屬性。數組

不推薦

<div class="salary-item flex-horizontal" v-for="(item, index) in detailList" v-if="item.is_hide == 0" :key="index"> 
                    
 </div>
複製代碼

推薦

<div class="salary-item flex-horizontal" v-for="(item, index) in detailListFilter" :key="index">                        
</div>

computed: {
        detailListFilter() {
            return this.detailList.filter((item) => {
                return item.is_hide == 0;
            });
        }
    },
複製代碼

2.if-else

####彈窗提示信息bash

不推薦

msg() {
            // 1所有撤回  2所有刪除 3單個撤回 4-工資詳情編輯狀態離開提示
            if (this.type === 1) {
                return '肯定撤回工資條嗎？\n撤回工資條後，員工將沒法訪問該工資條。';
            } else if (this.type === 2) {
                return '肯定刪除工資條嗎？\n刪除工資條後，數據將沒法恢復。';
            } else if (this.type === 3) {
                return '肯定撤回' + this.name + '的工資條嗎？\n撤回工資條後，員工將沒法訪問該工資條。';
            } else if (this.type === 4) {
                return '肯定放棄修改嗎？';
            } else if (this.type === 5) {
                return '肯定給全部人發送工資條嗎？';
            } else if (this.type === 6) {
                return '肯定將已撤回的工資條所有發送嗎？';
            }
        }
複製代碼

推薦

data() {
        return {
            dialogVisible: true,
            selectObj: [
                '肯定撤回工資條嗎？\n撤回工資條後，員工將沒法訪問該工資條。',
                '肯定刪除工資條嗎？\n刪除工資條後，數據將沒法恢復。',
                '肯定撤回' + this.name + '的工資條嗎？\n撤回工資條後，員工將沒法訪問該工資條。',
                '肯定放棄修改嗎？',
                '肯定給全部人發送工資條嗎？',
                '肯定將已撤回的工資條所有發送嗎？'
            ]
        };
    },


msg() {
            // 1所有撤回  2所有刪除 3單個撤回 4-工資詳情編輯狀態離開提示
            return this.selectObj[this.type - 1];
        }
複製代碼

####工資條詳情界面dom

不推薦

clickBtn(type) {
            // 1-撤回修改  2-保存重發  3-修改  4-保存
            if (type === 1) {
                this.$fetch('/jgz_withdraw_sent_bill', {bill_id: this.bill_id, send_id: this.send_id}, res => {
                    if (res.data.code === 0) {
                        this.editList = JSON.parse(JSON.stringify(this.detailList));
                        this.type = 2;
                        this.$msg.success('已撤回');
                        //1所有撤回  2所有刪除 3單個撤回
                        this.$emit('action-success', 3);
                    } else {
                        this.$msg.error(res.data.msg);
                    }
                });
                return;
            }

            if (type === 2) {
                //保存重發
                this.updatebillDetail(1);
                return;
            }

            if (type === 3) {
                this.editList = JSON.parse(JSON.stringify(this.detailList));
                this.type = 4;
                return;
            }

            if (type === 4) {
                //保存
                this.updatebillDetail(0);
                return;
            }
        },
複製代碼

推薦

handleBtnClick: { //1-撤回修改  2-保存重發  3-修改  4-保存
                '1': () => (this.withdrawSentBill()),
                '2': () => (this.updatebillDetail(1)),
                '3': () => (this.modifyBill()),
                '4': () => (this.updatebillDetail(0))
            }



clickBtn(type) {
            // 1-撤回修改  2-保存重發  3-修改  4-保存
            this.handleBtnClick[type]();
        },
複製代碼

工資條發送狀態

不推薦

sendStatus(status) {
            //發送狀態: 0:未發送 1:已發送 2:已撤回
            if (status == '0') {
                return '未發送';
            }
            if (status == '1') {
                return '已發送';
            }
            if (status == '2') {
                return '已撤回';
            }
        },
複製代碼

推薦

sendStatustext: ['未發送', '已發送', '已撤回'] //發送狀態: 0:未發送 1:已發送 2:已撤回

sendStatus(status) {
            //發送狀態: 0:未發送 1:已發送 2:已撤回
            return this.sendStatustext[status];
        },
複製代碼

3.mixins

獲取短信數量優化,三個地方須要使用ide

新建getSmsCount.jsfetch

export default {
    data () {
        return {
            remainSms: '', //剩餘短信條數
        };
    },
    methods: {
        getRemainSms() {
            this.$fetch('/jgz_get_remain_sms', {}, res => {
                if (res.data.code === 0) {
                    this.remainSms = res.data.data.remain || 0;
                } else {
                    this.$msg.error(res.data.msg);
                }
            });
        },
    }
};
複製代碼

使用flex

import getSmsCount from './mixins/getSmsCount';
export default {
    mixins: [getSmsCount],

    created() {
        this.getRemainSms();
    },
複製代碼

獲取客服QQ,6個地方引用優化

新建getQQList.jsui

export default {
    data () {
        return {
            qq: ''
        };
    },
    methods: {
        onGetQQList() {
            this.$fetch('/jgz_custom_list', {}, res => {
                if (res.data.code === 0) {
                    const qqList = res.data.data || [];
                    let qq = qqList[Math.floor(Math.random() * qqList.length)];
                    this.qq = qq;
                }
            });
        },
        onHideQQWindow() {
            if (!this.qq) {
                return this.$msg.error('系統繁忙，請稍後再試');
            }
            window.open('http://wpa.qq.com/msgrd?v=3&uin=' + this.qq + '&site=qq&menu=yes', '_brank');
        },
    }
};
複製代碼

使用this

import getSmsCount from './mixins/getSmsCount';
import getQQList from './mixins/getQQList';
export default {
    mixins: [getSmsCount, getQQList],

    mounted() {
            this.onGetQQList();
        },
複製代碼

修改開票信息

showEditeDialog() {
                this.ruleForm.comapnynamepass = this.title;
                this.ruleForm.checknumPass = this.taxpayer_number;
                this.ruleForm.email = this.email_address;
                this.editeDialogVisible = true;
                this.$refs['ruleForm'].clearValidate('comapnynamepass');
                this.$refs['ruleForm'].clearValidate('checknumPass');
                this.$refs['ruleForm'].clearValidate('email');
            },

複製代碼

第一次點擊修改彈窗報錯 spa

優化後代碼

showEditeDialog() {
                this.ruleForm.comapnynamepass = this.title;
                this.ruleForm.checknumPass = this.taxpayer_number;
                this.ruleForm.email = this.email_address;
                this.editeDialogVisible = true;
            },

//彈窗隱藏後重置表單字段
            cancelEdite() {
                this.$refs['ruleForm'].resetFields();
                this.editeDialogVisible = false;
            },
複製代碼

4.新手引導

優化前

<el-popover
                ref="popupFifth" popper-class="guide-popper-template"
                placement="right" width="432" trigger="manual" v-model="popupVisible5">



data() {
        return {
            guideDialogVisible: false,
            popupVisible1: false,
            popupVisible2: false,
            popupVisible3: false,
            popupVisible4: false,
            popupVisible5: false,
            guideStep: 1,
            seeLaterDialogVisible: false,
        };
    },

methods: {
        showGuide() {
            if (!localStorage.getItem('payroll_guide' + this.basicInfo.tenant_id)) {
                this.guideDialogVisible = true;
                this.guideStep = 1;
                setTimeout(() => {
                    this.popupVisible1 = true;
                }, 100);
            };
        },
        hideGuide() {
            localStorage.setItem('payroll_guide' + this.basicInfo.tenant_id, true);
            this.guideDialogVisible = false;
            this.popupVisible1 = false;
            this.popupVisible2 = false;
            this.popupVisible3 = false;
            this.popupVisible4 = false;
            this.popupVisible5 = false;
            this.guideStep = 0;
            this.seeLaterDialogVisible = false;
        },
        nextStep() {
            this.guideStep++;
            this.$emit('next-guide', this.guideStep);
            if (this.guideStep > 5) {
                this.hideGuide();
            } else {
                this.popupVisible1 = false;
                this.popupVisible2 = false;
                this.popupVisible3 = false;
                this.popupVisible4 = false;
                this.popupVisible5 = false;
                setTimeout(() => {
                    this.popupVisible1 = this.guideStep === 1;
                    this.popupVisible2 = this.guideStep === 2;
                    this.popupVisible3 = this.guideStep === 3;
                    this.popupVisible4 = this.guideStep === 4;
                    this.popupVisible5 = this.guideStep === 5;
                }, 250);
            }
        }
}
複製代碼

優化後

<el-popover
                 ref="popupFifth" popper-class="guide-popper-template"
-                placement="right" width="432" trigger="manual" v-model="popupVisible5">
+                placement="right" width="432" trigger="manual" v-model="popupVisible[4]">


     data() {
         return {
             guideDialogVisible: false,
-            popupVisible1: false,
-            popupVisible2: false,
-            popupVisible3: false,
-            popupVisible4: false,
-            popupVisible5: false,
+            popupVisible: [false, false, false, false, false],
             guideStep: 1,
             seeLaterDialogVisible: false,
         };
@@ -126,7 +122,7 @@ export default {
                 this.guideDialogVisible = true;
                 this.guideStep = 1;
                 setTimeout(() => {
-                    this.popupVisible1 = true;
+                    this.$set(this.popupVisible, 0, true);
                 }, 100);
             };
         },
@@ -142,11 +138,9 @@ export default {
         hideGuide() {
             localStorage.setItem('payroll_guide' + this.basicInfo.tenant_id, true);
             this.guideDialogVisible = false;
-            this.popupVisible1 = false;
-            this.popupVisible2 = false;
-            this.popupVisible3 = false;
-            this.popupVisible4 = false;
-            this.popupVisible5 = false;
+            this.popupVisible.forEach((item, index) => {
+                this.$set(this.popupVisible, index, false);
+            });
             this.guideStep = 0;
             this.seeLaterDialogVisible = false;
         },
@@ -156,17 +150,9 @@ export default {
             if (this.guideStep > 5) {
                 this.hideGuide();
             } else {
-                this.popupVisible1 = false;
-                this.popupVisible2 = false;
-                this.popupVisible3 = false;
-                this.popupVisible4 = false;
-                this.popupVisible5 = false;
+                this.$set(this.popupVisible, this.guideStep - 2, false);
                 setTimeout(() => {
-                    this.popupVisible1 = this.guideStep === 1;
-                    this.popupVisible2 = this.guideStep === 2;
-                    this.popupVisible3 = this.guideStep === 3;
-                    this.popupVisible4 = this.guideStep === 4;
-                    this.popupVisible5 = this.guideStep === 5;
+                    this.$set(this.popupVisible, this.guideStep - 1, true);
                 }, 250);
             }
         }

複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。