一開(kāi)始使用計(jì)算屬性時(shí)，我會(huì)有這樣的疑惑：計(jì)算屬性設(shè)計(jì)的初衷是什么？計(jì)算屬性能實(shí)現(xiàn)的，methods也能實(shí)現(xiàn)，如何選擇？為什么專(zhuān)門(mén)給出一個(gè)計(jì)算屬性，它和watch的區(qū)別在哪里？

1、為何要computed？

vue的數(shù)據(jù)(data)是響應(yīng)式的，有些時(shí)候，模板想要綁定的不是數(shù)據(jù)本身，而是數(shù)據(jù)的轉(zhuǎn)換或者一定規(guī)則的計(jì)算結(jié)果（return g*1000），這種情況下就需要計(jì)算屬性上場(chǎng)了。計(jì)算屬性屬于響應(yīng)式依賴(lài)，只要依賴(lài)的數(shù)據(jù)發(fā)生變化，計(jì)算屬性的值就自動(dòng)重新計(jì)算，無(wú)需重新調(diào)用和觸發(fā)，只要在模板中綁定計(jì)算屬性，它的值就會(huì)隨著依賴(lài)的數(shù)據(jù)同步變化。

2、與methods的區(qū)別？

可以將同一函數(shù)定義為一個(gè)方法而不是一個(gè)計(jì)算屬性。兩種方式的最終結(jié)果確實(shí)是完全相同的。然而，不同的是計(jì)算屬性是基于它們的響應(yīng)式依賴(lài)進(jìn)行緩存的。只在相關(guān)響應(yīng)式依賴(lài)發(fā)生改變時(shí)它們才會(huì)重新求值。這就意味著只要依賴(lài)的數(shù)據(jù)還沒(méi)有發(fā)生改變，多次訪問(wèn)計(jì)算屬性會(huì)立即返回之前的計(jì)算結(jié)果，而不必再次執(zhí)行函數(shù)。相比之下，每當(dāng)觸發(fā)重新渲染時(shí)，調(diào)用方法將總會(huì)再次執(zhí)行函數(shù)，花費(fèi)性能開(kāi)銷(xiāo)比較大。

兩者的區(qū)別就是computed有緩存，methods沒(méi)有緩存，每次都重新計(jì)算。

這也同樣意味著下面的計(jì)算屬性將不再更新，因?yàn)?Date.now()?不是響應(yīng)式依賴(lài)：

computed: {

? now: function(){

? ? return Date.now()

? }

}

3、與偵聽(tīng)屬性watch的區(qū)別？

computed適合監(jiān)聽(tīng)多個(gè)數(shù)據(jù)變化導(dǎo)致一個(gè)結(jié)果變化的場(chǎng)景。

watch適合一個(gè)數(shù)據(jù)變化，導(dǎo)致多個(gè)結(jié)果變化的場(chǎng)景