vue2 减少if else 等判断的出现

介绍两种vue2和js配合使用方法的案例，让我们的代码更加灵活

与、或、非

最简单的方法使用 与、或、非，和 !! 等优化逻辑

switch/case

场景适合时，使用 switch/case 代替 if/else

switch (day) {
    case 0:
        dayText = '日';
        break;
    case 1:
        dayText = '一';
        break;
    case 2:
        dayText = '二';
        break;
    // ...........
    default:
        break;
}

三目表达式配合方法或接口

首先运行括号内的三目表达式，判断是否是新数据，是的话调用新增接口，否则调用更新，这两句很简单但是非常实用，能减少不少的冗余代码，并且逻辑更加明确

(this.isNew ? create : update)(this.data).then(res => {...})

但是缺点也很明显，比如我们有更多的可能判断后需要三个或以上的接口，此方法就不太适用了

map

通过提前设置好各个情况对应的值，再使用 get() 来获取对应的值，在之前我也介绍过map和set

map/set

直接使用对象

首先大家都知道组件中定义 data 是函数形式，不是普通对象，并且在这个 data 中可以直接使用this.方法

data(){
    return{
        num：this.getNum
    }
},
created(){ console.log(this.num) }
methods: {
    getNum(){ console.log(1) }
}

 在created中打印一下这个 data 中的 num

 

这个函数中的 this 的指向是当前vue实例，因为 Vue 通过 data.call(vm, vm) 调用 data 函数

注意：在data中使用this的使用可以访问到 props 中的值 因为props是比data初始化快的，但是在data中的this不能访问data中的值 比如定义一个 a ，不能再 定义一个 b: this.a，b将会是 undefined

知道了以上的知识，我们可以定义一个类似于枚举的对象，其中 对应三种选择情况，调用接口

getList: {
  'A': [ 方法/接口, 'topName'],
  'B': [ 方法/接口, 'name'],
  'C': [ 方法/接口, 'bottomName']
}

在我使用请求对应的接口时，分别需要一个 参数的 不同key值 ，相同的值

activeList(title) {
  const query = {  // 公共参数
    'pageNum': this.pageNum,
    'pageSize': this.pageSize,
  }
  query[this.getList[title][1]] = this.value  // 单独参数
  return this.getList[title][0](query) // 返回请求
},
getNewData(title) {
    this.activeList(title).then(res => {
        // 处理数据
    })
},

拆分一下方便我们维护，这样写主要是能减少大量的 if else 等，判断的出现