vue+eleui项目 日常代码review(善用computed和慎用watch)

1.computed(计算属性)和watch(监听器)都是以vue的依赖追踪机制为基础的，当依赖数据发生变化时，依赖此数据的相关数据会自动变化

2.computed处理场景：一个数据受多个数据的影响；watch处理场景：一个数据影响多个数据

基础的使用场景就不多做介绍了，主要根据常见实际业务需求来展示computed的使用优势和对wantch的谨慎使用

 

场景(computed)：有一个样式固定的盒子A，接口返回两个参数(值0或1)，不同的组合会有对应的文案来显示在A里面

<div>{{getAlertText}}</div>

    data() {
      return {
        alertText: '',
      };
    },
    computed: {
      getAlertText() {
        let text = {
          '0,0':'为了您的账户安全，请先完成实名认证,并设置资金密码',
          '1,0':'为了您的账户安全，请先设置资金密码',
          '0,1':'为了您的账户安全，请先完成实名认证',
        };
        return text[this.alertText];
      }
    },
    methods: {
      preCheckAccount() {
        this.$_http.preCheckAccount().then(res => {
          if (res.status !== 0) {
            return this.$message.error(res.msg);
          }
          let {isKyc,hasPayPwd} = res.dataWrapper.preCheck;
          let arr = [isKyc, hasPayPwd];
          
          this.alertText = arr.join(',');

        });
      },
    },
    created() {
      this.preCheckAccount();
    },

场景(watch)：父组件传递props异步数据到子组件

对于这个问题一开始有两种方案来解决1.v-if和created     2.watch和methods

最后选择使用第一种方案

建议尽量减少watch的使用，尤其是deep watch

当使用deep watch的时候(监听器会给对象的所有属性加上监听器，增大性能开销。