zoukankan      html  css  js  c++  java
  • watch监控和computed监控

    watch,computed区别


    computed属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。主要当作属性来使用;
    methods方法表示一个具体的操作,主要书写业务逻辑;
    watch一个对象,键是需要观察的表达式,值是对应回调函数。主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作;可以看作是computed和methods的结合体;


    语法格式

    watch: {
      '$route.path':function(newVal, oldVal){
      //console.log(newVal+'---'+oldVal);
        if (newVal==='/login') {
          console.log('欢迎进入登录页面')
        }else if(newVal==='/register'){
          console.log('欢迎进入注册页面')
        }
      }
    },


    computed:

    在 computed 中,可以定义一些 属性,这些属性,叫做 【计算属性】, 计算属性的,本质,就是 一个方法,只不过,我们在使用 这些计算属性的时候,是把 它们的 名称,直接当作 属性来使用的;并不会把 计算属性,当作方法去调用;
    注意1: 计算属性,在引用的时候,一定不要加 () 去调用,直接把它 当作 普通 属性去使用就好了;
    注意2: 只要 计算属性,这个 function 内部,所用到的 任何 data 中的数据发送了变化,就会 立即重新计算 这个 计算属性的值
    注意3: 计算属性的求值结果,会被缓存起来,方便下次直接使用; 如果 计算属性方法中,所以来的任何数据,都没有发生过变化,则,不会重新对 计算属性求值;

    computed: {

      'fullname': function () {
        console.log('ok')
        return this.filstname + '-'+this.middlename+'-'+ this.lastname
      }
    }

     
     
     
    watch: {
      isShowCQR(newVal) {
        this.isShowCQR = newVal;
      },
      needKnowData: {
        handler(newVal) {
          console.log("watch1906" + newVal.status);
        },
        deep: true
      },
    }
     
     
     
     
     
     
    computed: {
      isNext() {
        if(this.isShowCQR){
          if(
            this.authCode &&
            this.needKnowData.status
          ){
            return true
          }else{
            return false
          };
        }else{
          if(
            this.authCode &&
            this.needKnowData.status
          ){
            return true
          }else{
            return false
          };
        };
      },
    },
  • 相关阅读:
    ldap客户端工具ldap admin tool
    jenkins忘记密码
    python中Requests的重试机制
    python中dict对象和字符串string对象互相转换
    redis管理工具rdm安装;另一个管理工具medis
    supervieord的使用
    webstorm关闭vim模式
    阿里巴巴java规则p3c结合sonar使用
    BigDecimal setScale()设置无效 scale()取得的值不是setScale()设置的值
    java.lang.ArithmeticException: Rounding necessary
  • 原文地址:https://www.cnblogs.com/dongyuezhuang/p/11777192.html
Copyright © 2011-2022 走看看