偵聽對象 watch

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

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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章