首頁 > 開發者 > JavaScript
淺析Vue中method與computed的區別，vuecomputed
在new Vue的配置參數中的computed和methods都可以處理大量的邏輯代碼，但是什麼時候用哪個屬性，要好好區分一下才能做到正確的運用vue。
computed稱為計算屬性，顧名思義，計算就要返回一個計算的結果，所以，當我們要處理大量的邏輯，但是最後要取得最後的結果的時候可以用computed；
為了說明method與computed的區別，在此我想先來看看computed屬性在vue官網中的說法：模板內的運算式是非常便利的，但是它們實際上只用於簡單的運算。在模板中放入太多的邏輯會讓模板過重且難以維護。
我們來看一個例子：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="javascript/vue.min.js"></script></head><body><div id="app">//直接在模板中綁定運算式<p>{{message.split('').reverse().join('')}}</p>//運用計算屬性<p>message反轉之後的結果:{{reverseMessage}}</p></div><script>var vm=new Vue({el:"#app",data:{message:"hello"},computed:{reverseMessage:function(){return this.message.split('').reverse().join('');}}})</script></body></html>
在上面這種情況下，模板不再簡單和清晰。在意識到這是反向顯示 message 之前，你不得不再次確認第二遍。當你想要在模板中多次反向顯示 message 的時候，問題會變得更糟糕。這就是對於任何複雜邏輯，你都應當使用計算屬性的原因。下面我將運用method與computed進行比較:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script src="javascript/vue.min.js"></script></head><body><div id="app"><p>{{message}}</p>//直接在模板中綁定運算式<p>{{message.split('').reverse().join('')}}</p>//運用計算屬性<p>{{reverseMessage}}</p>//運用methods方式<p>{{methodMessage()}}</p></div><script>var vm=new Vue({el:"#app",data:{message:"hello"},computed:{reverseMessage:function(){return this.message.split('').reverse().join('');}},methods:{methodMessage:function () {return this.message.split('').reverse().join('');}}})</script></body></html>
我在將這二種方式進行了比較。返回的結果是一樣的，寫但在法上computed計算屬性的方式在用屬性時不用加(),而methods方式在使用時要像方法一樣去用，必須加().
兩種方式在緩衝上也大有不同，利用computed計算屬性是將 reverseMessage與message綁定，只有當message發生變化時才會觸發reverseMessage，而methods方式是每次進入頁面都要執行該方法，但是在利用即時資訊時，比如顯示當前進入頁面的時間，必須用methods方式。
總結
以上所述是小編給大家介紹的Vue中method與computed的區別，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對幫客之家網站的支援！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
