這是 data driven 的機制，類似 event driven。
只是對象變成「data 內的變數」，一旦有變動時就驅動對應的動作。
有點抽象對吧？
沒問題，就一個一個來看例子囉。
watcher
顧名思義，就是觀察 data 內的變數，有變動時就會呼叫
如果是你，會怎麼設計語法呢？
當然就是用和變數一樣名稱的 function 呀，就代表觀察的變數，很直覺！
例如下面的範例，
當 quantity 有變動時，就呼叫 quantity()
就這樣而已。
小提醒：
Watcher 只監控資料的「頂層」變化，若監聽的是物件或陣列，內部屬性改變不會觸發。
如果想要觀察結構內部的變化呢？
就設定 deep: true
但要特別注意，這可能會影響效能
這個想也知道不是嗎？所以要小心使用喔。
computed
相較於 watcher 監督一個變數，
computed 觀察 data 內所有的變數，只要任何變數 (properties) 有變動，就會重新計算特定變數對應的 function (Computed)
舉個例子，
當 data 中的 price 或 quantity 有變動，就會重新計算 subtotal (某個 vue 變數 {{ subtotle }})
這樣有什麼好處呢？
AI 說 (註)：可以避免不必要的重複計算 (依賴沒改變，就不會重新執行函式)
我是覺得還好，
反正一般的計算對現在的電腦速度來說，快到影響很小。
換另一個角度切入，
watcher 和 computed 都是一種因應資料變化，產生對應動作的機制
類似 event driven (使用者觸發)
可以當作 data driven (資料觸發)
畢竟因應變化 (event 或 data)，採取對應的措施 (driven)，
是整個作業系統 (OS)，甚至也是人類的運作機制。
附註：
一開始看 w3school 的教學，重複看了 2 次還是不太懂，問 AI 就懂了，時代真的變了！
附件:
評語
請登入後才可以評分