vue 對watch的使用 監聽數據 並包含$store 數據變化的監聽


watch 實現監聽數據改變

使用方法

watch:{

  data (n, m) {

   n: 變更后的數據

   m:變更前的數據

  }

}

以上方法 只有在數據發生改變的時候 才能監聽到 這個時候 提供了參數 immediate 立即執行監聽內的函數

使用方法

watch:{

  data (n, m) {

   n: 變更后的數據

   m:變更前的數據

  },

  immediate: true

}

如果遇到監聽對象 以上的方法是無法實現的 那么我們就要監聽對象內部參數 則watch 提供了 deep 參數 代表深入觀察 

實現方法

watch:{

  object (n, m) {

   n: 變更后的數據

   m:變更前的數據

  },

  deep: true

}

以上使用 deep 方法的話 能實現想要的 但是~ 這樣太麻煩了 因為這樣的watch 會一層一層的查找 object  那么我們直接點找到想監聽的對象key 就好了

使用方法

watch:{

  ‘object.key’ (n, m) {

   n: 變更后的數據

   m:變更前的數據

  }

}

以上直接找到 利用字符串形式 完美解決

還有一種就是監聽 store 就沒辦法用上面的直接監聽了 那么我們利用計算屬性來

實現如下

computed: {

  data () {

    return this.$store.getters.obj

  }

}

獲得data  再對data進行監聽 完美解決

watch:{

  data (n, m) {

   n: 變更后的數據

   m:變更前的數據

  }

}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM