從“心”認識Vue（二）: 計算屬性和methods方法的區別
阿新 • • 發佈：2021-02-03
從“心”認識Vue（二）: 計算屬性和methods方法的區別
前言
開始學習vue了，但是程式設計的思想還是不容易轉變過來，一兩週過去了，只知道個大概，知其然而不知其所以然，打算開一個系列帖，重新認識下vue。
一、methods方法
vue中呼叫函式方法通常在methods中新增：
先看下面小例子：
<!DOCTYPE html>
<html lang="en" 上面結果大家都知道，h2裡會顯示Kobe Bryant 全名。
二、computed計算屬性
我們再看下面小例子，與methods進行對比：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 計算屬性-->
<h2>{{getFullName}}</h2>
<h2>{{getFullName}}</h2>
<h2>{{getFullName}}</h2>
</div>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
firstName: "Kobe",
lastName: "Bryant"
},
computed: {
getFullName: function () {
console.log("getFullName")
return this.firstName + " " + this.lastName
}
}
})
</script>
</body>
</html>
好像結果是一樣的，並沒有什麼不同。
但是我們開啟控制檯發現，使用methods方法fullName被呼叫了三次，而計算屬性中getFullName只被呼叫了一次！
- 原因就在於計算屬性多次呼叫時會呼叫快取，只有當數值發生變化時才會重新呼叫，而methods方法只要觸發時就會被呼叫
- Vue官網中說道，對於任何複雜邏輯，你都應當使用計算屬性。
資料屬性變化時：
三、計算屬性補充
其實上面我們只是用到了計算屬性的getter方法，而計算屬性還有setter方法，即為它賦值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 計算屬性使用時函式不用加括號-->
{{getFullName}}
</div>
<script src="node_modules/vue/dist/vue.min.js"></script>
<script>
new Vue({
el:"#app",
data:{
firstName:"Loebron",
lastName:"James"
},
computed:{
//完整的計算屬性寫法
getFullName:{
//函式名：匿名函式
// getFullName:function(){
// return this.firstName + " " + this.lastName
// }
set:function(newValue){
const names = newValue.split(" ");
this.firstName = names[0]
this.lastName = names[1]
},
get:function(){
return this.firstName + " " + this.lastName
}
}
}
})
</script>
</body>
</html>
而一般我們在使用過程中，很少用setter方法去賦值，不設setter屬性，故刪除setter方法，然後再進行進一步簡寫，就變成我們通常的寫法，即上面第一次使用時的方法進行書寫.
總結
- 1.methods 與 computed 使用結果完全相同；
- 2.computed使用時會呼叫快取，多次呼叫時只進行執行第一次，只有在資料變化時才會重新呼叫。
- 3.計算屬性還有setter方法，而我們一般情況不使用它