快捷導(dǎo)航

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

更新時(shí)間：2018年03月06日 08:37:18 作者：ranyonsue

在new Vue的配置參數(shù)中的computed和methods都可以處理大量的邏輯代碼，但是什么時(shí)候用哪個(gè)屬性，要好好區(qū)分一下才能做到正確的運(yùn)用vue。這篇文章主要介紹了Vue中method與computed的區(qū)別,需要的朋友可以參考下

在new Vue的配置參數(shù)中的computed和methods都可以處理大量的邏輯代碼，但是什么時(shí)候用哪個(gè)屬性，要好好區(qū)分一下才能做到正確的運(yùn)用vue。

computed稱為計(jì)算屬性，顧名思義，計(jì)算就要返回一個(gè)計(jì)算的結(jié)果，所以，當(dāng)我們要處理大量的邏輯，但是最后要取得最后的結(jié)果的時(shí)候可以用computed；

為了說(shuō)明method與computed的區(qū)別，在此我想先來(lái)看看computed屬性在vue官網(wǎng)中的說(shuō)法：模板內(nèi)的表達(dá)式是非常便利的，但是它們實(shí)際上只用于簡(jiǎn)單的運(yùn)算。在模板中放入太多的邏輯會(huì)讓模板過(guò)重且難以維護(hù)。

我們來(lái)看一個(gè)例子：

<!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">
//直接在模板中綁定表達(dá)式
<p>{{message.split('').reverse().join('')}}</p>
//運(yùn)用計(jì)算屬性
<p>message反轉(zhuǎn)之后的結(jié)果:{{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>

在上面這種情況下，模板不再簡(jiǎn)單和清晰。在意識(shí)到這是反向顯示 message 之前，你不得不再次確認(rèn)第二遍。當(dāng)你想要在模板中多次反向顯示 message 的時(shí)候，問(wèn)題會(huì)變得更糟糕。這就是對(duì)于任何復(fù)雜邏輯，你都應(yīng)當(dāng)使用計(jì)算屬性的原因。下面我將運(yùn)用method與computed進(jìn)行比較:

<!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>
//直接在模板中綁定表達(dá)式
<p>{{message.split('').reverse().join('')}}</p>
//運(yùn)用計(jì)算屬性
<p>{{reverseMessage}}</p>
//運(yùn)用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>

我在將這二種方式進(jìn)行了比較。返回的結(jié)果是一樣的，寫但在法上computed計(jì)算屬性的方式在用屬性時(shí)不用加(),而methods方式在使用時(shí)要像方法一樣去用，必須加().

兩種方式在緩存上也大有不同，利用computed計(jì)算屬性是將 reverseMessage與message綁定，只有當(dāng)message發(fā)生變化時(shí)才會(huì)觸發(fā)reverseMessage，而methods方式是每次進(jìn)入頁(yè)面都要執(zhí)行該方法，但是在利用實(shí)時(shí)信息時(shí)，比如顯示當(dāng)前進(jìn)入頁(yè)面的時(shí)間，必須用methods方式。

總結(jié)

以上所述是小編給大家介紹的Vue中method與computed的區(qū)別，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: