偵聽對象 watch

處理依賴，Vue還提供了另外一種處理依賴的方法：偵聽對象。
再computed屬性里面，我們設置需要計算的屬性，而在函數里面設置計算這個屬性的邏輯，偵聽屬性采用的則是另外一種機制，把想要偵聽的屬性名稱設置為鍵，這里就是counter這個鍵，必須與屬性名稱相同，這里就是data屬性中的counter屬性，在函數中指定counter屬性變化時需要執行的代碼，Vue會自動把屬性變化之后的數值傳遞給該函數，以允許我們對屬性變化做出反應，所以這里我也可以通過設置一個全局輸出變量來實現，有時可能確實得這樣，比如屬性不能像這里這樣計算，然后再其它地方設置變量值，雖然這樣做也可以，但是我會馬上告訴你最佳方法還是盡量再允許的情況下多使用計算屬性，因為這樣做優化最好，比如使用緩存等等，通過減少不必要的任務，讓Vue允許更快，盡管有時候你需要對每一次變化做出反應，另外一個計算屬性不能實現的功能是，執行異步任務，計算屬性必須同步執行，也就是說再compute的函數里面，必須立即返回一個返回值，中間不能訪問服務器或者執行異步任務，如果需要執行異步任務，或者像前面一樣，需要再屬性更新時執行的代碼，那就不能用計算屬性來解決了。這時你就可以使用偵聽對象。比如你打算兩秒后充值counter屬性值，再watch:counter里面增加一個setTimeout()方法，注意，因為這個函數再回調內的閉包里，所以必須再另外一個變量中存儲Vue實例，this讓我們可以方便第訪問實例中的各個屬性，但是它必須放在一個變量里，Vue實例的屬性以及其它的數據，再Vue實例的默認對象和函數里面都可以通過this直接訪問，但是再回調閉包里面則不行。

查看效果，改變counter值，但是兩秒后被充值，因為設置了偵聽對象，所以counter一變化就會調用函數，執行這部分代碼就可以訪問異步任務了。