成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

淺析Vue中computed與method的區(qū)別

RyanHoo / 1510人閱讀

摘要：其實(shí)官方文檔對這個(gè)已經(jīng)說的很清楚了，筆者不過是在其基礎(chǔ)上進(jìn)行歸納總結(jié)，各位看官還是先去讀一下官方文檔吧區(qū)別于的兩個(gè)核心在官方文檔中，強(qiáng)調(diào)了區(qū)別于最重要的兩點(diǎn)是屬性調(diào)用，而是函數(shù)調(diào)用帶有緩存功能，而不是，下面我們看一個(gè)具體的例子部分

其實(shí)官方文檔對這個(gè)已經(jīng)說的很清楚了，筆者不過是在其基礎(chǔ)上進(jìn)行歸納總結(jié)，各位看官還是先去讀一下官方文檔吧
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è)具體的例子




    
{{message}}

    
{{methodTest}}

    
{{methodTest()}}

    
{{methodTest()}}

    
{{methodTest()}}

    
{{computedTest}}

    
{{computedTest}}





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定義的方法我們是以屬性訪問的形式調(diào)用的，{{computedTest}}

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

3. computed的緩存功能

首先，我們要明白緩存究竟有什么用？
相比大家都知道HTTP緩存，其核心作用就是對一些服務(wù)端未更新的資源進(jìn)行復(fù)用，避免一些無謂的請求，優(yōu)化了用戶的體驗(yàn)

對于computed也是一樣的：

在上面的例子中，methods定義的方法是以函數(shù)調(diào)用的形式來訪問的，那么test2-1,test2-2,test2-3是反復(fù)地將methodTest方法運(yùn)行了三遍，如果我們碰到一個(gè)場景，需要1000個(gè)methodTest的返回值，那么毫無疑問，這勢必造成大量的浪費(fèi)
更恐怖的是，如果你更改了message的值，那么這1000個(gè)methodTest方法每一個(gè)又會重新計(jì)算。。。。

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

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

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

這樣的好處也是顯而易見的，同樣的，如果我們碰到一個(gè)場景，需要1000個(gè)computedTest的返回值，那么毫無疑問，這相對于methods而言，將大大地節(jié)約內(nèi)存
哪怕你改變了message的值，computedTest也只會計(jì)算一次而已

4. computed的其它說明

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/94397.html

相關(guān)文章

  • Vue的computed(計(jì)算屬性)使用實(shí)例之TodoList

    摘要：最近倒騰了一會，有點(diǎn)迷惑其中與這兩個(gè)屬性的區(qū)別所以試著寫了這個(gè)，好土掩面逃類似中組件的方法，不同的是采用的與綁定事件。簡而言之，是一次性計(jì)算沒有緩存，是有緩存的計(jì)算。 最近倒騰了一會vue，有點(diǎn)迷惑其中methods與computed這兩個(gè)屬性的區(qū)別,所以試著寫了TodoList這個(gè)demo，(好土掩面逃~）; 1. methods methods類似react中組件的方法，不同的是v...

    waruqi 評論0 收藏0

  • Vue的computed(計(jì)算屬性)使用實(shí)例之TodoList

    摘要：最近倒騰了一會，有點(diǎn)迷惑其中與這兩個(gè)屬性的區(qū)別所以試著寫了這個(gè)，好土掩面逃類似中組件的方法，不同的是采用的與綁定事件。簡而言之，是一次性計(jì)算沒有緩存，是有緩存的計(jì)算。 最近倒騰了一會vue，有點(diǎn)迷惑其中methods與computed這兩個(gè)屬性的區(qū)別,所以試著寫了TodoList這個(gè)demo，(好土掩面逃~）; 1. methods methods類似react中組件的方法，不同的是v...

    lk20150415 評論0 收藏0

  • Vue.js中 computed 和 methods 的區(qū)別

    摘要：官方文檔中已經(jīng)有對其的解釋了，在這里把我的理解記錄一下。的使用場景模板中的復(fù)雜邏輯表達(dá)式，為了防止邏輯過重導(dǎo)致不易維護(hù)，都應(yīng)當(dāng)把相關(guān)邏輯放入計(jì)算屬性。只在相關(guān)依賴發(fā)生改變時(shí)它們才會重新求值。 官方文檔中已經(jīng)有對其的解釋了，在這里把我的理解記錄一下。 computed 的使用場景 HTML模板中的復(fù)雜邏輯表達(dá)式，為了防止邏輯過重導(dǎo)致不易維護(hù)，都應(yīng)當(dāng)把相關(guān)邏輯放入計(jì)算屬性。 比如這...

    Raaabbit 評論0 收藏0

  • Vue.js中 computed 和 methods 的區(qū)別

    摘要：官方文檔中已經(jīng)有對其的解釋了，在這里把我的理解記錄一下。的使用場景模板中的復(fù)雜邏輯表達(dá)式，為了防止邏輯過重導(dǎo)致不易維護(hù)，都應(yīng)當(dāng)把相關(guān)邏輯放入計(jì)算屬性。只在相關(guān)依賴發(fā)生改變時(shí)它們才會重新求值。 官方文檔中已經(jīng)有對其的解釋了，在這里把我的理解記錄一下。 computed 的使用場景 HTML模板中的復(fù)雜邏輯表達(dá)式，為了防止邏輯過重導(dǎo)致不易維護(hù)，都應(yīng)當(dāng)把相關(guān)邏輯放入計(jì)算屬性。 比如這...

    TwIStOy 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<