在Vue中method與computed使用什么區(qū)別

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 19:55:54

在Vue中method與computed使用什么區(qū)別

在Vue中method與computed使用什么區(qū)別:這次給大家?guī)碓赩ue中method與computed使用什么區(qū)別，在Vue中method與computed使用的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。在new Vue的配置參數(shù)中的computed和methods都可以處理大量的邏輯代碼，但是什么時候用哪個屬性，要好好區(qū)分一下才能做到

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀在Vue中method與computed使用什么區(qū)別:這次給大家?guī)碓赩ue中method與computed使用什么區(qū)別，在Vue中method與computed使用的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。在new Vue的配置參數(shù)中的computed和methods都可以處理大量的邏輯代碼，但是什么時候用哪個屬性，要好好區(qū)分一下才能做到

這次給大家?guī)碓赩ue中method與computed使用什么區(qū)別，在Vue中method與computed使用的注意事項有哪些，下面就是實戰(zhàn)案例，一起來看一下。

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

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

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

我們來看一個例子：

<!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反轉(zhuǎn)之后的結(jié)果:{{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 之前，你不得不再次確認第二遍。當(dāng)你想要在模板中多次反向顯示 message 的時候，問題會變得更糟糕。這就是對于任何復(fù)雜邏輯，你都應(yīng)當(dāng)使用計算屬性的原因。下面我將運用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>

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

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

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注Gxl網(wǎng)其它相關(guān)文章！

在Vue中method與computed使用什么區(qū)別

推薦度：

點擊下載本文 文檔為doc格式

標(biāo)簽：區(qū)別 VUE 不同

熱門焦點

在Vue中method與computed使用什么區(qū)別

在Vue中method與computed使用什么區(qū)別

在Vue中method與computed使用什么區(qū)別

最新推薦

猜你喜歡

熱門推薦