Vue的計算屬性緩存和method的區別在哪？

一.先看一個例子

<div id="example">
    {{ message.split('').reverse().join('')  }}
</div>

當我們看到這個例子不再是簡單的聲明式邏輯 不再像 {{ 1 + 1 }}那么的容易理解,你可以需要看一段時間之后才意識道,"哦 原來這是個將字符串反轉的例子！"

當我們頻繁使用這種復雜的邏輯時,我們就需要使用Vue提供的計算屬性了,對於任何復雜的邏輯你都應當使用“計算屬性”

 

// 例子：

<div id="example">
    <p>Orignal message: "{{ message }}"</p>
    <p>conputed  reversed message:"{{ reversedMessage}}"</p>
</div>

var vm = new Vue({
     el:"#example",
     data:{
         message:"Hello"
    },
   
    // 使用計算屬性:computed
     computed:{
         reversedMessage:function() {
              return this.message.split('').reverse().join('')
        }
     }


})

打印上面的例子結果如下:

Orignal message:"Hello"

conputed  reversed message:"olleH"

看到上面的例子,我們用方法也可以同樣實現這個例子,這里就不上代碼了！

重點說一下這兩者的區別,以前我對這個也是很懵,今天通過vue的官方文檔弄清楚了區別:

計算屬性是基於它們的依賴進行緩存的，也就是說當你下次在執行這個操作,是不需要再次執行函數的,因為緩存了嘛！~前提是你沒有改 message的值

方法則會每次執行都會調用函數,現在再來看看Vue文檔如何進行解釋的。以這段話結束這篇博客

我們為什么需要緩存？假設我們有一個性能開銷比較大的的計算屬性 A，它需要遍歷一個巨大的數組並做大量的計算。然后我們可能有其他的計算屬性依賴於 A 。
如果沒有緩存，我們將不可避免的多次執行 A 的 getter！如果你不希望有緩存，請用方法來替代。