vue中的watch用法

VUE官方文檔：

vm.$watch API       

 vue偵聽器

Vue.js 提供了一個方法 watch，它用於觀察Vue實例上的數據變動。對應一個對象，鍵是觀察表達式，值是對應回調。值也可以是方法名，或者是對象，包含選項。

watch是一個對象，對象就有鍵，有值。

鍵是觀察表達式，就是要監控的對象，比如說$route，這個就是要監控路由的變化。或者是data中的某個變量。

值可以是函數：就是當你監控的傢伙變化時，需要執行的函數，這個函數有兩個形參，第一個是當前值，第二個是變化後的值。 
值也可以是函數名：不過這個函數名要用單引號來包裹。 
第三種情況厲害了。 
值是包括選項的對象：選項包括有三個。

第一個handler：其值是一個回調函數。即監聽到變化時應該執行的函數。
第二個是deep：其值是true或false；確認是否深入監聽。（一般監聽時是不能監聽到對象屬性值的變化的，數組的值變化可以聽到。）
第三個是immediate：其值是true或false；確認是否以當前的初始值執行handler的函數。
 

// vue 偵聽器（當偵聽對象的值發生改變時，執行處理器）
  watch: {
    // 鍵是對象
    // 值是函數
    passwordType: function(val, oldVal) {
      console.log("new: %s, old: %s", val, oldVal);
    },
    // 鍵是字符串表達式（字符串的形式監聽對象屬性，監聽對象的某些屬性，特定場景可代替deep做深度監控） 
    // 值是方法名
    'loginForm.password': 'doMethod',
    // 鍵是路由對象
    // 值是對象（含有handler，deep，immediate）三個選項
    $route: {
      //偵聽表達式
      handler: function(route) {
        //處理器
        this.watchQRResult(window.location.href);
        const query = route.query;
        if (query) {
          this.redirect = query.redirect;
          this.otherQuery = this.getOtherQuery(query);
        }
      },
      immediate: true //初始化時是否執行
    }
  },