国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

淺析Vue中computed與method的區別

RyanHoo / 1503人閱讀

摘要：其實官方文檔對這個已經說的很清楚了，筆者不過是在其基礎上進行歸納總結，各位看官還是先去讀一下官方文檔吧區別于的兩個核心在官方文檔中，強調了區別于最重要的兩點是屬性調用，而是函數調用帶有緩存功能，而不是，下面我們看一個具體的例子部分

其實官方文檔對這個已經說的很清楚了，筆者不過是在其基礎上進行歸納總結，各位看官還是先去讀一下官方文檔吧
1.computed區別于method的兩個核心

在官方文檔中，強調了computed區別于method最重要的兩點

computed是屬性調用，而methods是函數調用

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

OK，下面我們看一個具體的例子




    
{{message}}

    
{{methodTest}}

    
{{methodTest()}}

    
{{methodTest()}}

    
{{methodTest()}}

    
{{computedTest}}

    
{{computedTest}}





let vm = new Vue({
    el: "#app",
    data: {
        message: "我是消息，"
    },
    methods: {
        methodTest() {
            return this.message + "現在我用的是methods"
        }
    },
    computed: {
        computedTest() {
            return this.message + "現在我用的是computed"
        }
    }
})
2. computed的屬性調用

細心的朋友可能已經發現了，在HTML的插值里

computed定義的方法我們是以屬性訪問的形式調用的，{{computedTest}}

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

3. computed的緩存功能

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

對于computed也是一樣的：

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

所以，官方文檔才反復強調對于任何復雜邏輯，你都應當使用計算屬性

computed依賴于data中的數據，只有在它的相關依賴數據發生改變時才會重新求值

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

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

4. computed的其它說明

computed其實是既可以當做屬性訪問也可以當做方法訪問

computed的由來有一個重要原因，就是防止文本插值中邏輯過重，導致不易維護

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94397.html

相關文章

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

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

    waruqi 評論0 收藏0

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

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

    lk20150415 評論0 收藏0

  • Vue.js中 computed 和 methods 的區別

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

    Raaabbit 評論0 收藏0

  • Vue.js中 computed 和 methods 的區別

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

    TwIStOy 評論0 收藏0

發表評論

0條評論

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