vue 中 computed 和 watch 的區(qū)別

　　watch 和 computed 都是以 Vue 的依賴(lài)追蹤機(jī)制為基礎(chǔ)的，當(dāng)某一個(gè)依賴(lài)型數(shù)據(jù)(依賴(lài)型數(shù)據(jù)：簡(jiǎn)單理解即放在 data 等對(duì)象下的實(shí)例數(shù)據(jù))發(fā)生變化的時(shí)候，所有依賴(lài)這個(gè)數(shù)據(jù)的相關(guān)數(shù)據(jù)會(huì)自動(dòng)發(fā)生變化，即自動(dòng)調(diào)用相關(guān)的函數(shù)，來(lái)實(shí)現(xiàn)數(shù)據(jù)的變動(dòng)。

　　當(dāng)依賴(lài)的值變化時(shí)，在 watch 中，是可以做一些復(fù)雜的操作的，而 computed 中的依賴(lài)，僅僅是一個(gè)值依賴(lài)于另一個(gè)值，是值上的依賴(lài)。

　　應(yīng)用場(chǎng)景：

　　computed：用于處理復(fù)雜的邏輯運(yùn)算;一個(gè)數(shù)據(jù)受一個(gè)或多個(gè)數(shù)據(jù)影響;用來(lái)處理 watch 和 methods 無(wú)法處理的，或處理起來(lái)不方便的情況。例如處理模板中的復(fù)雜表達(dá)式、購(gòu)物車(chē)?yán)锩娴纳唐窋?shù)量和總金額之間的變化關(guān)系等。

　　watch：用來(lái)處理當(dāng)一個(gè)屬性發(fā)生變化時(shí)，需要執(zhí)行某些具體的業(yè)務(wù)邏輯操作，或要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開(kāi)銷(xiāo)較大的操作;一個(gè)數(shù)據(jù)改變影響多個(gè)數(shù)據(jù)。例如用來(lái)監(jiān)控路由、inpurt 輸入框值的特殊處理等。

　　區(qū)別：

　　computed

　　初始化顯示或者相關(guān)的 data、props 等屬性數(shù)據(jù)發(fā)生變化的時(shí)候調(diào)用;

　　計(jì)算屬性不在 data 中，它是基于 data 或 props 中的數(shù)據(jù)通過(guò)計(jì)算得到的一個(gè)新值，這個(gè)新值根據(jù)已知值的變化而變化;

　　在 computed 屬性對(duì)象中定義計(jì)算屬性的方法，和取 data 對(duì)象里的數(shù)據(jù)屬性一樣，以屬性訪(fǎng)問(wèn)的形式調(diào)用;

　　如果 computed 屬性值是函數(shù)，那么默認(rèn)會(huì)走 get 方法，必須要有一個(gè)返回值，函數(shù)的返回值就是屬性的屬性值;

　　computed 屬性值默認(rèn)會(huì)緩存計(jì)算結(jié)果，在重復(fù)的調(diào)用中，只要依賴(lài)數(shù)據(jù)不變，直接取緩存中的計(jì)算結(jié)果，只有依賴(lài)型數(shù)據(jù)發(fā)生改變，computed 才會(huì)重新計(jì)算;

　　在 computed 中的，屬性都有一個(gè) get 和一個(gè) set 方法，當(dāng)數(shù)據(jù)變化時(shí)，調(diào)用 set 方法。

　　watch

　　主要用來(lái)監(jiān)聽(tīng)某些特定數(shù)據(jù)的變化，從而進(jìn)行某些具體的業(yè)務(wù)邏輯操作，可以看作是 computed 和 methods 的結(jié)合體;

　　可以監(jiān)聽(tīng)的數(shù)據(jù)來(lái)源：data，props，computed 內(nèi)的數(shù)據(jù);

　　watch 支持異步;

　　不支持緩存，監(jiān)聽(tīng)的數(shù)據(jù)改變，直接會(huì)觸發(fā)相應(yīng)的操作;

　　監(jiān)聽(tīng)函數(shù)有兩個(gè)參數(shù)，第一個(gè)參數(shù)是最新的值，第二個(gè)參數(shù)是輸入之前的值，順序一定是新值，舊值。

上一篇

ribbon和feign區(qū)別