在Vue中詳細解讀method與computed的差異（詳細教學）
- 亚连原創
- 2018-06-01 11:12:461668瀏覽
在new Vue的設定參數中的computed和methods都可以處理大量的邏輯程式碼，但是什麼時候用哪個屬性，要好好區分一下才能做到正確的運用vue。這篇文章主要介紹了Vue中method與computed的區別,需要的朋友可以參考下
在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>
<p id="app">
//直接在模板中绑定表达式
<p>{{message.split('').reverse().join('')}}</p>
//运用计算属性
<p>message反转之后的结果:{{reverseMessage}}</p>
</p>
<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>
<p id="app">
<p>{{message}}</p>
//直接在模板中绑定表达式
<p>{{message.split('').reverse().join('')}}</p>
//运用计算属性
<p>{{reverseMessage}}</p>
//运用methods方式
<p>{{methodMessage()}}</p>
</p>
<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方式。
上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
js中document.write和document.writeln的差異
Javascript中prototype與__proto__的關係詳解
#以上是在Vue中詳細解讀method與computed的差異（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！