適用場景
設(shè)想一個場景用爪，你需要得到一個復(fù)雜運算/邏輯的返回值喧兄，利用模板內(nèi)的表達又過長且難以閱讀和維護由蘑，這時計算屬性就可以很好的解決你的問題“锱觯看下面的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>computed</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message.split(' ').reverse().join(' ')}}
</div>
<script>
new Vue({
el: "#app",
data () {
return {
message: 'Hello world!'
}
}
})
</script>
</body>
</html>
{{message.split(' ').reverse().join(' ')}}這個表達式共進行了三種操作相味，但看起來并不是很清晰，并且當(dāng)我們想在其他地方也用到最終值時就需要復(fù)制殉挽、粘貼冗長的一大段代碼丰涉，所以這時候計算屬性就可以及時的發(fā)揮它巨大的作用拓巧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>computed</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{reverseText}}
<hr>
{{reverseText}}
<hr>
{{reverseText}}
</div>
<script>
new Vue({
el: "#app",
data () {
return {
message: 'Hello world!'
}
},
// 計算屬性
computed: {
reverseText () {
return this.message.split(' ').reverse().join(' ')
}
}
})
</script>
</body>
</html>
這時，我們就可以輕松應(yīng)用結(jié)果在多個地方一死，而且代碼還看起來更清晰了肛度。
使用方法
在計算屬性computed里可以完成各種復(fù)雜的邏輯（運算、函數(shù)調(diào)用）投慈，所有的計算屬性以函數(shù)的形式寫在computed里承耿，最終返回計算結(jié)果，當(dāng)message（data數(shù)據(jù)）有任何變化逛裤，計算屬性會同時更新瘩绒，并且更新視圖。
每個計算屬性都包括getter和setter带族，我們平時默認用到的是getter來讀取锁荔。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>computed</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
姓：{{firstName}}
<hr>
名：{{lastName}}
<hr>
姓名：{{fullName}}
</div>
<script>
new Vue({
el: "#app",
data () {
return {
firstName: '鐵柱',
lastName: '李'
}
},
computed: {
fullName: {
// getter
get: function() {
return this.lastName + this.firstName
},
// setter
set: function (data) {
let name = data.split(' ')
this.firstName = name[name.length - 1]
this.lastName = name[0]
}
}
}
})
</script>
</body>
</html>
默認調(diào)用時是用fullName的getter方法讀取數(shù)據(jù)，想使用set方式時：
<div id="app">
姓：{{firstName}}
<hr>
名：{{lastName}}
<hr>
姓名：{{fullName = '一 枚蛋Oops'}}
</div>
計算屬性緩存
有人有可能會問蝙砌，為什么不使用methods直接函數(shù)調(diào)用阳堕，這里就要區(qū)分一下他們的區(qū)別了
methods：只要重新渲染就會更新，函數(shù)就會執(zhí)行择克。
computed：計算屬性依賴的數(shù)據(jù)變化時恬总，它才會重新取值，只要依賴數(shù)據(jù)不變化肚邢，它就不更新壹堰，可以緩存數(shù)據(jù)。
所以到底使用哪個屬性是依據(jù)你的項目需求骡湖，看看你需不需要緩存贱纠。
以上是本期全部內(nèi)容，欲知后事如何响蕴，請聽下回分解<(￣︶￣)↗[GO!]
