這篇文章將為大家詳細(xì)講解有關(guān)Vue中computed和method之間有哪些區(qū)別，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、微信小程序、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了安塞免費(fèi)建站歡迎大家使用！

1.computed區(qū)別于method的兩個(gè)核心

在官方文檔中，強(qiáng)調(diào)了computed區(qū)別于method最重要的兩點(diǎn)

• computed是屬性調(diào)用，而methods是函數(shù)調(diào)用

• computed帶有緩存功能，而methods不是

OK，下面我們看一個(gè)具體的例子

<!--HTML部分-->
<div id="app">
    <h2>{{message}}</h2>
    <p class="test1">{{methodTest}}</p>
    <p class="test2-1">{{methodTest()}}</p>
    <p class="test2-2">{{methodTest()}}</p>
    <p class="test2-3">{{methodTest()}}</p>
    <p class="test3-1">{{computedTest}}</p>
    <p class="test3-2">{{computedTest}}</p>
</div>
<!--script部分-->
let vm = new Vue({
    el: '#app',
    data: {
        message: '我是消息，'
    },
    methods: {
        methodTest() {
            return this.message + '現(xiàn)在我用的是methods'
        }
    },
    computed: {
        computedTest() {
            return this.message + '現(xiàn)在我用的是computed'
        }
    }
})

2. computed的屬性調(diào)用

細(xì)心的朋友可能已經(jīng)發(fā)現(xiàn)了，在HTML的插值里

• computed定義的方法我們是以屬性訪問(wèn)的形式調(diào)用的，{{computedTest}}

• 但是methods定義的方法，我們必須要加上()來(lái)調(diào)用，如{{methodTest()}}，否則，視圖會(huì)出現(xiàn)test1的情況，見(jiàn)下圖

3. computed的緩存功能

首先，我們要明白緩存究竟有什么用？

相比大家都知道HTTP緩存，其核心作用就是對(duì)一些服務(wù)端未更新的資源進(jìn)行復(fù)用，避免一些無(wú)謂的請(qǐng)求，優(yōu)化了用戶的體驗(yàn)

對(duì)于computed也是一樣的：

在上面的例子中，methods定義的方法是以函數(shù)調(diào)用的形式來(lái)訪問(wèn)的，那么test2-1,test2-2,test2-3是反復(fù)地將methodTest方法運(yùn)行了三遍，如果我們碰到一個(gè)場(chǎng)景，需要1000個(gè)methodTest的返回值，那么毫無(wú)疑問(wèn)，這勢(shì)必造成大量的浪費(fèi)

更恐怖的是，如果你更改了message的值，那么這1000個(gè)methodTest方法每一個(gè)又會(huì)重新計(jì)算。。。。

所以，官方文檔才反復(fù)強(qiáng)調(diào)對(duì)于任何復(fù)雜邏輯，你都應(yīng)當(dāng)使用計(jì)算屬性

computed依賴于data中的數(shù)據(jù)，只有在它的相關(guān)依賴數(shù)據(jù)發(fā)生改變時(shí)才會(huì)重新求值

如上例，在Vue實(shí)例化的時(shí)候，computed定義computedTest方法會(huì)做一次計(jì)算，返回一個(gè)值，在隨后的代碼編寫中，只要computedTest方法依賴的message數(shù)據(jù)不發(fā)生改變，computedTest方法是不會(huì)重新計(jì)算的，也就是說(shuō)test3-1,test3-2是直接拿到了返回值，而非是computedTest方法重新計(jì)算的結(jié)果。

這樣的好處也是顯而易見(jiàn)的，同樣的，如果我們碰到一個(gè)場(chǎng)景，需要1000個(gè)computedTest的返回值，那么毫無(wú)疑問(wèn)，這相對(duì)于methods而言，將大大地節(jié)約內(nèi)存

哪怕你改變了message的值，computedTest也只會(huì)計(jì)算一次而已

4. computed的其它說(shuō)明

• computed其實(shí)是既可以當(dāng)做屬性訪問(wèn)也可以當(dāng)做方法訪問(wèn)

• computed的由來(lái)有一個(gè)重要原因，就是防止文本插值中邏輯過(guò)重，導(dǎo)致不易維護(hù)

關(guān)于“Vue中computed和method之間有哪些區(qū)別”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

本文題目：Vue中computed和method之間有哪些區(qū)別-創(chuàng)新互聯(lián)
文章源于：http://jinyejixie.com/article44/depehe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、虛擬主機(jī)、網(wǎng)站排名、品牌網(wǎng)站制作、移動(dòng)網(wǎng)站建設(shè)、定制開(kāi)發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)