我們在 Vue 項目中多多少少都會有用到 computed 和 watch蓖柔，這兩個看似都能實現(xiàn)對數(shù)據(jù)的監(jiān)聽绿映，但還是有區(qū)別磨取。所以以下通過一個小栗子來理解一下這兩者的區(qū)別淹禾。
計算屬性computed :
- 支持緩存殿如，只有依賴數(shù)據(jù)發(fā)生改變贡珊，才會重新進行計算
- 不支持異步，當computed內(nèi)有異步操作時無效涉馁，無法監(jiān)聽數(shù)據(jù)的變化
3.computed 屬性值會默認走緩存门岔，計算屬性是基于它們的響應式依賴進行緩存的，也就是基于data中聲明過或者父組件傳遞的props中的數(shù)據(jù)通過計算得到的值 - 如果一個屬性是由其他屬性計算而來的烤送，這個屬性依賴其他屬性寒随，是一個多對一或者一對一，一般用computed
5.如果computed屬性屬性值是函數(shù)，那么默認會走get方法妻往；函數(shù)的返回值就是屬性的屬性值互艾；在computed中的，屬性都有一個get和一個set方法蒲讯，當數(shù)據(jù)變化時忘朝，調(diào)用set方法。
偵聽屬性watch：
- 不支持緩存判帮，數(shù)據(jù)變局嘁，直接會觸發(fā)相應的操作；
2.watch支持異步晦墙；
3.監(jiān)聽的函數(shù)接收兩個參數(shù)悦昵，第一個參數(shù)是最新的值；第二個參數(shù)是輸入之前的值晌畅； - 當一個屬性發(fā)生變化時但指，需要執(zhí)行對應的操作；一對多抗楔；
- 監(jiān)聽數(shù)據(jù)必須是data中聲明過或者父組件傳遞過來的props中的數(shù)據(jù)棋凳，當數(shù)據(jù)變化時，觸發(fā)其他操作连躏，函數(shù)有兩個參數(shù)剩岳，
immediate：組件加載立即觸發(fā)回調(diào)函數(shù)執(zhí)行，
deep: 深度監(jiān)聽入热，為了發(fā)現(xiàn)對象內(nèi)部值的變化拍棕，復雜類型的數(shù)據(jù)時使用，例如數(shù)組中的對象內(nèi)容的改變勺良，注意監(jiān)聽數(shù)組的變動不需要這么做绰播。注意：deep無法監(jiān)聽到數(shù)組的變動和對象的新增，參考vue數(shù)組變異,只有以響應式的方式觸發(fā)才會被監(jiān)聽到尚困。
總結(jié)
watch和computed都是以Vue的依賴追蹤機制為基礎(chǔ)的蠢箩，當某一個依賴型數(shù)據(jù)（依賴型數(shù)據(jù)：簡單理解即放在 data 等對象下的實例數(shù)據(jù)）發(fā)生變化的時候，所有依賴這個數(shù)據(jù)的相關(guān)數(shù)據(jù)會自動發(fā)生變化尾组，即自動調(diào)用相關(guān)的函數(shù)忙芒，來實現(xiàn)數(shù)據(jù)的變動。
當依賴的值變化時讳侨，在watch中，是可以做一些復雜的操作的奏属，而computed中的依賴跨跨，僅僅是一個值依賴于另一個值，是值上的依賴。
應用場景：
computed：用于處理復雜的邏輯運算勇婴；一個數(shù)據(jù)受一個或多個數(shù)據(jù)影響忱嘹；用來處理watch和methods無法處理的，或處理起來不方便的情況耕渴。例如處理模板中的復雜表達式拘悦、購物車里面的商品數(shù)量和總金額之間的變化關(guān)系等。
watch：用來處理當一個屬性發(fā)生變化時橱脸，需要執(zhí)行某些具體的業(yè)務邏輯操作础米，或要在數(shù)據(jù)變化時執(zhí)行異步或開銷較大的操作；一個數(shù)據(jù)改變影響多個數(shù)據(jù)添诉。例如用來監(jiān)控路由屁桑、inpurt 輸入框值的特殊處理等。
區(qū)別：
computed
初始化顯示或者相關(guān)的 data栏赴、props 等屬性數(shù)據(jù)發(fā)生變化的時候調(diào)用蘑斧；
計算屬性不在 data 中，它是基于data 或 props 中的數(shù)據(jù)通過計算得到的一個新值须眷，這個新值根據(jù)已知值的變化而變化竖瘾；
在 computed 屬性對象中定義計算屬性的方法，和取data對象里的數(shù)據(jù)屬性一樣花颗，以屬性訪問的形式調(diào)用捕传；
如果 computed 屬性值是函數(shù)，那么默認會走 get 方法捎稚，必須要有一個返回值乐横，函數(shù)的返回值就是屬性的屬性值；
computed 屬性值默認會緩存計算結(jié)果今野，在重復的調(diào)用中葡公，只要依賴數(shù)據(jù)不變，直接取緩存中的計算結(jié)果条霜，只有依賴型數(shù)據(jù)發(fā)生改變催什，computed 才會重新計算；
在computed中的宰睡，屬性都有一個 get 和一個 set 方法蒲凶，當數(shù)據(jù)變化時，調(diào)用 set 方法拆内。
watch
主要用來監(jiān)聽某些特定數(shù)據(jù)的變化旋圆，從而進行某些具體的業(yè)務邏輯操作，可以看作是 computed 和 methods 的結(jié)合體麸恍；
可以監(jiān)聽的數(shù)據(jù)來源：data灵巧，props搀矫，computed內(nèi)的數(shù)據(jù)；
watch支持異步刻肄；
不支持緩存瓤球，監(jiān)聽的數(shù)據(jù)改變，直接會觸發(fā)相應的操作敏弃；
監(jiān)聽函數(shù)有兩個參數(shù)卦羡，第一個參數(shù)是最新的值，第二個參數(shù)是輸入之前的值麦到，順序一定是新值绿饵，舊值。
