巧用computed计算属性和watch监视

一.computed

(1)当需要进行数值计算并且依赖于其他属性值时，一般用computed，避免每次获取值时重新计算。（computed具有缓存特性）
(2)当前端展示的数据需要根据后端返回的某个字段判断时，一般可以用computed结合switch…case…(如列表的某个字段及图标，图标颜色需要根据后端返回的某个字段判断，这部分数据是有规律的，并不完全是后端直接返回，就需要前端在computed判断）其实和(1)情况类似，但一开始没想到

 defaultType() {
    
    
        let defaultType = {
    
    }
        switch (this.activeTabType) {
    
    
        case 'exam':
          defaultType = {
    
    
            name:       '考试',
            icon:       'icon-woderenwu-kaoshi',
            iconColor:  '#F5534F',
          }
          break
        case 'studyProject':
          defaultType = {
    
    
            name:       '学习项目',
            icon:       'icon-woderenwu-xuexixiangmu',
            iconColor:  '#4EAAFF',
          }
          break
        case 'studyTask':
          defaultType = {
    
    
            name:       '学习任务',
            icon:       'icon-woderenwu-xuexi',
            iconColor:  '#9455F1',
          }
          break
        case 'evaluation':
          defaultType = {
    
    
            name:       '评估',
            icon:       'icon-woderenwu-pinggu',
            iconColor:  '#36DED1',
          }
          break
        case 'investigation':
          defaultType = {
    
    
            name:       '调研',
            icon:       'icon-woderenwu-tiaoyan',
            iconColor:  '#FC7F48',
          }
          break
        default:
        }
        return defaultType
  },

二.watch

当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。
一般我的使用场景：
（1）一个请求需要的参数很多，每次参数变化需要重新发请求时，可以用watch监视参数变化，并配合deep:true使用

watch: {
    
    
      filterParams: {
    
              // filterParams是发请求带给服务器的参数
        handler: function() {
    
    
          this.loadData()         // 发请求时调用的方法
        },
        deep:      true,
        immediate: true,
      },
}

（2）数据变化时需要进行异步操作