watch可以用來(lái)檢測(cè)vue實(shí)例上的數(shù)據(jù)變動(dòng)

1、基礎(chǔ)監(jiān)測(cè)

<script> export default
{
    name:'index',
    data() {
      return {
        demo: '',
        value: ''     
      }
    },
    watch: {
      demo(val) {
          this.value =this.demo
      }
     }
  };
</script>

2、immediate屬性
watch 的一個(gè)特點(diǎn)是，最初綁定的時(shí)候是不會(huì)執(zhí)行的，要等到值改變時(shí)才執(zhí)行監(jiān)聽(tīng)計(jì)算。要使它最初綁定的時(shí)候就執(zhí)行，使用immediate

watch: {
  firstName: {
    handler(newValue, oldValue) {
      this.fullName = newValue + ' ' + this.lastName;
    },
    immediate: true
  }
}

3、deep屬性（默認(rèn)為false）
代表是否深度監(jiān)聽(tīng)，如一個(gè)obj里面的一個(gè)元素，如果不加deep則無(wú)法監(jiān)測(cè)到obj里面的數(shù)據(jù)。
obj={'a':'1', 'b':'2'}

watch: {
  obj: {
    handler(newValue, oldValue) {
      console.log(newValue);
    },
    deep: true
  }
}

這樣a和b的變化都能監(jiān)測(cè)到.。
但監(jiān)聽(tīng)器會(huì)一層層的往下遍歷，給對(duì)象的所有屬性都加上這個(gè)監(jiān)聽(tīng)器，但是這樣性能開(kāi)銷(xiāo)就會(huì)非常大了，任何修改obj里面任何一個(gè)屬性都會(huì)觸發(fā)這個(gè)監(jiān)聽(tīng)器里的 handler。如果要監(jiān)聽(tīng)obj里的單個(gè)變量，可以這樣：

watch: {
  'obj.a': {
    handler(newValue, oldValue) {
      console.log(newValue);
    }
  }
}

4、監(jiān)測(cè)路由

watch: {
    changeShowType(value) {
      console.log("-----"+value);
    },
    '$route'(to, from){
      console.log(to);  //to表示去往的界面
      console.log(from); //from表示來(lái)自于哪個(gè)界面
      if(to.path=="/shop/detail"){
        console.log("test");
      }
    }
  }