適用場景
設(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!]