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);
             }
         }

复制代码