methods,watch和computed都是以函數(shù)為基礎(chǔ)的缰雇,但各自卻都不同或舞。
一哗魂、作用機(jī)制上
1.watch和computed都是以Vue的依賴追蹤機(jī)制為基礎(chǔ)的,它們都試圖處理這樣一件事情:當(dāng)某一個數(shù)據(jù)(稱它為依賴數(shù)據(jù))發(fā)生變化的時候忱嘹,所有依賴這個數(shù)據(jù)的“相關(guān)”數(shù)據(jù)“自動”發(fā)生變化嘱腥,也就是自動調(diào)用相關(guān)的函數(shù)去實現(xiàn)數(shù)據(jù)的變動。
2.對methods:methods里面是用來定義函數(shù)的拘悦,很顯然齿兔,它需要手動調(diào)用才能執(zhí)行。而不像watch和computed那樣础米,“自動執(zhí)行”預(yù)先定義的函數(shù)愧驱。
二、從性質(zhì)上
1.methods里面定義的是函數(shù)椭盏,你顯然需要像"fuc()"這樣去調(diào)用它(假設(shè)函數(shù)為fuc)。
2.computed是計算屬性吻商,事實上和和data對象里的數(shù)據(jù)屬性是同一類的(使用上)掏颊。
3.watch:類似于監(jiān)聽機(jī)制+事件機(jī)制。
例如:
watch: {
?? firstName: function(val) {this.fullName = val +this.lastName }
}
firstName的改變是這個特殊“事件”被觸發(fā)的條件艾帐,而firstName對應(yīng)的函數(shù)就相當(dāng)于監(jiān)聽到事件發(fā)生后執(zhí)行的方法
三乌叶、watch和computed的對比
首先它們都是以Vue的依賴追蹤機(jī)制為基礎(chǔ)的,它們的共同點是:都是希望在依賴數(shù)據(jù)發(fā)生改變的時候柒爸,被依賴的數(shù)據(jù)根據(jù)預(yù)先定義好的函數(shù)准浴,發(fā)生“自動”的變化。我們當(dāng)然可以自己寫代碼完成這一切捎稚,但卻很可能造成寫法混亂乐横,代碼冗余的情況求橄。
但watch和computed也有明顯不同的地方:
watch和computed各自處理的數(shù)據(jù)關(guān)系場景不同
1.watch擅長處理的場景:一個數(shù)據(jù)影響多個數(shù)據(jù)
2.computed擅長處理的場景:一個數(shù)據(jù)受多個數(shù)據(jù)影響
相比于watch/computed,methods不處理數(shù)據(jù)邏輯關(guān)系葡公,只提供可調(diào)用的函數(shù)