vue watch 的簡單使用

在項目開發中遇到的需求，這點寫第一個dome

監聽父組件傳過來的值發送變化

在子組件中

<template>

　　<div class="components">{{mes}}</div>

</template>

<script> export default { props:['message'],//父組件傳過來的值 data(){ return{ mes:1 } }, watch:{ //最廣泛的用法，當傳過來的message變化時纔會去監聽並執行
    // newval 新值
    // odlval 舊的值
    // message(newval,odlval){
    // this.mes = newval
    // },



    // 若是想讓值在最初的時候就執行，須要用到一下兩個屬性'handler'，'immediate'
    // 表明在wacth裏聲明瞭message這個方法以後當即先去執行handler方法，若是設置了false，那麼效果和上邊例子同樣
 message:{ handler(newval,oldval){ this.mes = newval }, immediate:true//第一次進來就開始監視，而不是等到下次數據改變了才執行
 } } } </script>

 監聽data裏面的狀態發生變化

1 watch:{
2  amends(newval,odlval){ //amends是data裏面的定義的狀態，紅色處不用加this，其餘寫法參考上面的 3          //處理邏輯4      }
5  }

 監聽對象的改變

//普通的watch方法沒法監聽到對象內部屬性的改變，只有data中的數據纔可以監聽到變化，此時就須要deep屬性對對象進行深度監聽。

每一個屬性變化都會執行
watch: {
    amends: {
      handler(newName, oldName) {
      // ...
    },
    deep: true,//設置爲true能夠監聽對象
    immediate: true
    }
  } 

監聽對象裏面的屬性

監聽指定的屬性
watch: {
    'amends.name': {
      handler(newName, oldName) {
      // ...
      },
      deep: true,
      immediate: true
    }
  }