vue 代码优化总结

# vue 代码优化总结

# 去掉无用代码

去掉无用的组件钩子函数

不规范：components: {}, 去掉

去掉无用 log 及注释

# 善用 watch 和 computed

重复、复杂计算使用 computed

不规范： v-if="scope.row.status === 0 || scope.row.status === 1"

改造：通过计算属性 computed 传参

v-if="isShowRecoveryBtn(scope.row.status)"

computed: {
  // 是否显示恢复按钮
  isShowRecoveryBtn() {
    return (status) => {
      return parseInt(status, 0) === 0 || parseInt(status, 0) === 1
    };
  },
}

1
2
3
4
5
6
7
8

# v-for 不能用 index 作为 key

<div v-for="item in list" :key="item.id" ></div>

# 规范 props 写法

必须指定类型和默认值，对象或者数组的默认值用函数写法

props: {
    // 带有默认值的数字
    propA: {
      type: String,
      default: '
    },
    // 带有默认值的对象
    propB: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: () => {}
    },
}

1
2
3
4
5
6
7
8
9
10
11
12
13

更新时间: 9/8/2021, 4:24:27 PM

← js 代码优化总结 css 代码优化总结→