vue代码优化 - 技术栈

① 对象映射

arduino 复制代码

const statusMap = {
  0: '审核中',
  1: '审核成功', 
  2: '审核失败',
  3: '打回重填'
};

// 使用方式
const statusText = statusMap[status];

②组件懒加载

xml 复制代码

<template>
    <Components />
</template>

<script lang="ts" setup>
    const Components = defineAsyncComponent(async () => import('./components/Components/Components.vue'));
</script>

③计算属性

xml 复制代码

<template>
    <div class="filter-header">
      <div class="status-display" :style="{ color: statusColor }">
        {{ statusText }}
      </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue';
    const statusMap = {
      0: '审核中',
      1: '审核成功',
      2: '审核失败',
      3: '打回重填'
    }

    const statusColorMap = {
      0: 'var(--el-text-color-secondary)',
      1: 'var(--el-color-success)',
      2: 'var(--el-color-danger)',
      3: 'var(--el-color-warning)'
    }
    
    const statusText = computed(() => {
      return statusMap[props.tableData?.status] || ''
    })

    const statusColor = computed(() => {
      return statusColorMap[props.tableData?.status] || ''
    })
</script>

④ 单行返回语句

kotlin 复制代码

if (this.previousCsGroupId === csGroupId) return;
if (!value) return;

⑤使用模板字面量进行模版字符串拼接

ini 复制代码

const key = `${prefix}/static`;

⑥过滤filter

php 复制代码

<template>
    <el-table :data="filteredList">
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="status" label="状态" />
    </el-table>
</template>

<script lang="ts" setup>
    import { ref, computed } from 'vue'

    const list = ref([
      {id: 0, name: 'test1', status: 0},
      {id: 1, name: 'test2', status: 1},
      {id: 2, name: 'test3', status: 0},
      {id: 3, name: 'test4', status: 1},
      {id: 4, name: 'test5', status: 3},
      {id: 5, name: 'test6', status: 1},
      {id: 6, name: 'test7', status: 3},
      {id: 7, name: 'test8', status: 0},
      {id: 8, name: 'test9', status: 4}
    ])

    const filteredList = computed(() => {
      return list.value.filter(item => item.status === 1)
    })
</script>

⑦定义枚举

constant.ts

ini 复制代码

// 使用 enum 定义错误码
export enum ErrorCodes {
  PARAM_ERROR = 10090018,
  SUBMIT_ERROR = 10090023,
  EMPTY_MATERIAL = 10090024,
  SUBMITTER_MISMATCH = 10090028
}

// 使用 interface 定义错误消息映射
export interface IErrorMessages {
  [key: number]: string
}

export const ERR_MSG: IErrorMessages = {
  [ErrorCodes.PARAM_ERROR]: '参数异常',
  [ErrorCodes.SUBMIT_ERROR]: '提交异常',
  [ErrorCodes.EMPTY_MATERIAL]: '提交材料为空',
  [ErrorCodes.SUBMITTER_MISMATCH]: '审核提交人不一致',
};

弹出提示

xml 复制代码

<script lang="ts" setup>
import { ERR_MSG } from '/constant.ts';
import { computed, defineAsyncComponent, getCurrentInstance, onMounted, reactive, ref } from 'vue';
const { proxy } = getCurrentInstance();

const next = async () => {
    ...
    if (res.retInNode !== 0) {
            state.submitErr = ERR_MSG[res.retInNode] || proxy.$i18next.t('参数异常');
    }
}

</script>

constant.ts

less 复制代码

// 定义是提审类型
export const IS_EXPEDITED_TYPE = {
  Normal: 0, // 选择不加急
  Urgent: 1, // 选择加急
  RefillUrgent: 2, // 【打回】显示加急
};

使用类型

xml 复制代码

<template>
    <div>
        {{ (state.formValue.expedited === IS_EXPEDITED_TYPE.Normal || speedupRest === SpeedupRest_Time.NoQuota) ? '不加急' : '加急' }}
    </div>
</template>
<script lang="ts" setup>
import { IS_EXPEDITED_TYPE } from '/constant.ts';
</script>