Vue中method與computed的區別-js教程-PHP中文網

首頁

web前端

js教程

Vue中method與computed的區別

php中世界最好的语言

Mar 28, 2018 am 11:48 AM

computed method 差別

這次帶給大家Vue中method與computed的差別，在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方式。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7543

CakePHP 教程

1381

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

char與wchar_t在C語言中的區別 Apr 03, 2025 pm 03:09 PM

在 C 語言中，char 和 wchar_t 的主要區別在於字符編碼：char 使用 ASCII 或擴展 ASCII，wchar_t 使用 Unicode；char 佔用 1-2 個字節，wchar_t 佔用 2-4 個字節；char 適用於英語文本，wchar_t 適用於多語言文本；char 廣泛支持，wchar_t 依賴於編譯器和操作系統是否支持 Unicode；char 的字符範圍受限，wchar_t 的字符範圍更大，並使用專門的函數進行算術運算。

c#多線程和異步的區別 Apr 03, 2025 pm 02:57 PM

多線程和異步的區別在於，多線程同時執行多個線程，而異步在不阻塞當前線程的情況下執行操作。多線程用於計算密集型任務，而異步用於用戶交互操作。多線程的優勢是提高計算性能，異步的優勢是不阻塞 UI 線程。選擇多線程還是異步取決於任務性質：計算密集型任務使用多線程，與外部資源交互且需要保持 UI 響應的任務使用異步。

C語言 sum 的作用是什麼？ Apr 03, 2025 pm 02:21 PM

C語言中沒有內置求和函數，需自行編寫。可通過遍歷數組並累加元素實現求和：循環版本：使用for循環和數組長度計算求和。指針版本：使用指針指向數組元素，通過自增指針遍歷高效求和。動態分配數組版本：動態分配數組並自行管理內存，確保釋放已分配內存以防止內存洩漏。

char和unsigned char的區別是什麼 Apr 03, 2025 pm 03:36 PM

char 和 unsigned char 是存儲字符數據的兩種數據類型，主要區別在於處理負數和正數的方式：值範圍：char 有符號 (-128 到 127)，unsigned char 無符號 (0 到 255)。負數處理：char 可以存儲負數，unsigned char 不能。位模式：char 最高位表示符號，unsigned char 無符號位。算術運算：char 和 unsigned char 作為有符號和無符號類型，其算術運算方式不同。兼容性：char 和 unsigned char

c語言函數的基本要求有哪些 Apr 03, 2025 pm 10:06 PM

C語言函數是代碼模塊化和程序搭建的基礎。它們由聲明（函數頭）和定義（函數體）組成。 C語言默認使用值傳遞參數，但也可使用地址傳遞修改外部變量。函數可以有返回值或無返回值，返回值類型必須與聲明一致。函數命名應清晰易懂，使用駝峰或下劃線命名法。遵循單一職責原則，保持函數簡潔性，以提高可維護性和可讀性。

H5和小程序與APP的區別 Apr 06, 2025 am 10:42 AM

H5、小程序和APP的主要區別在於：技術架構：H5基於網頁技術，小程序和APP為獨立應用程序。體驗和功能：H5輕便易用，功能受限；小程序輕量級，交互性好；APP功能強大，體驗流暢。兼容性：H5跨平台兼容，小程序和APP受平台限制。開發成本：H5開發成本低，小程序中等，APP最高。適用場景：H5適合信息展示，小程序適合輕量化應用，APP適合複雜功能應用。