1. 什么是計(jì)算屬性
我們己經(jīng)可以搭建出一個(gè)簡(jiǎn)單的 Vue 應(yīng)用妓布，在模板中雙向綁定一些數(shù)據(jù)或表達(dá)式了叛拷。但是表達(dá)式如果過長(zhǎng)腾窝，或邏輯更為復(fù)雜時(shí)卷员，就會(huì)變得雕腫甚至難以閱讀和維護(hù)盈匾。
<div>
{{ text.split ( ’,’ ) ?reverse () . join (’,’)}}
</div>
這里的表達(dá)式包含 3 個(gè)操作，并不是很清晰毕骡，所以在遇到復(fù)雜的邏輯時(shí)應(yīng)該使用 計(jì)算屬性
所有的計(jì)算屬性都以函數(shù)的形式寫在 Vue 實(shí)例內(nèi)的computed 選項(xiàng)內(nèi)削饵，最終返回計(jì)算后的結(jié)果。
2.計(jì)算屬性的用法
在一個(gè)計(jì)算屬性里可以完成各種復(fù)雜的邏輯未巫，包括運(yùn)算窿撬、函數(shù)調(diào)用等，只要最終返回一個(gè)結(jié)果就可以叙凡。除了上例簡(jiǎn)單的用法
計(jì)算屬性還可以依賴多個(gè) Vue 實(shí)例的數(shù)據(jù)尤仍，只要其中任一數(shù)據(jù)變化，計(jì)算屬性就會(huì)重新執(zhí)行狭姨，視圖也會(huì)更新
getter和setter
每一個(gè)計(jì)算屬性都包含一個(gè) getter 和一個(gè) setter，我們上面的兩個(gè)示例都是計(jì)算屬性的默認(rèn)用法 苏遥， 只是利用了 getter來讀取饼拍。在你需要時(shí)，也可以提供一個(gè) setter 函數(shù) 田炭， 當(dāng)手動(dòng)修改計(jì)算屬性的值就像修改一個(gè)普通數(shù)據(jù)那樣時(shí)师抄，就會(huì)觸發(fā) setter函數(shù)，執(zhí)行一些自定義的操作
計(jì)算屬性除了上述簡(jiǎn)單的文本插值外教硫，還經(jīng)常用于動(dòng)態(tài)地設(shè)置元素的樣式名稱 class 和內(nèi)聯(lián)樣式 style
小技巧: 計(jì)算屬性還有兩個(gè)很實(shí)用的小技巧容易被忽略：
一是計(jì)算屬性可以依賴其他計(jì)算屬性：
二是計(jì)算屬性不僅可以依賴當(dāng)前 Vue 實(shí)例的數(shù)據(jù)叨吮，還可以依賴其他實(shí)例的數(shù)據(jù)
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>計(jì)算屬性</title>
</head>
<body>
<div id="demo">
{{text}} <br>
{{text.split(',').reverse().join(',')}} <br>
----下邊是使用計(jì)算屬性得到的 <br>
{{ reverseText }}
<!--邏輯過長(zhǎng)就會(huì)變得臃腫，難以維護(hù)瞬矩，所以遇到復(fù)雜的邏輯時(shí)茶鉴，應(yīng)當(dāng)使用計(jì)算屬性-->
<hr>
計(jì)算屬性的緩存： <br>
{{ now }} <br>
通過methods拿到的時(shí)間戳(方法需要加括號(hào))： <br>
{{ thisTime()}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript">
//需求：'123,456,789'編程789,456,123
var app = new Vue({
el:'#demo',
data:{
text:'123,456,789',
msg:'nihao'
},
//定義計(jì)算屬性
computed:{
//如果計(jì)算屬性直接跟一個(gè)function，默認(rèn)的就是getter函數(shù)
reverseText:function(){
return this.text.split(',').reverse().join(',');
},
now:function(){
return Date.now();
}
},
methods:{
thisTime: function(){
return Date.now();
}
}
})
</script>
</body>
</html>
3.3計(jì)算屬性的緩存
調(diào)用 methods 里的方法也可以與計(jì)算屬性起到同樣的作用
頁面中的方法： 如果是調(diào)用方法景用，只要頁面重新渲染涵叮。方法就會(huì)重新執(zhí)行，不需要渲染伞插，則不需要重新執(zhí)行
計(jì)算屬性：不管渲染不渲染割粮，只要計(jì)算屬性依賴的數(shù)據(jù)未發(fā)生變化，就永遠(yuǎn)不變
結(jié)論: 沒有使用計(jì)算屬性媚污，在 methods 里定義了一個(gè)方法實(shí)現(xiàn)了相同的效果舀瓢，甚至該方法還可以接受參數(shù)，使用起來更靈活耗美。既然使用 methods 就可以實(shí)現(xiàn)京髓，那么為什么還需要計(jì)算屬性呢航缀？原因就是計(jì)算屬性是基于它的依賴緩存的。 一個(gè)計(jì)算屬性所依賴的數(shù)據(jù)發(fā)生變化時(shí)朵锣，它才會(huì)重新取值谬盐，所以text 只要不改變，計(jì)算屬性也就不更新
**何時(shí)使用: **-----------使用計(jì)算屬性還是 methods 取決于你是否需要緩存诚些，當(dāng)遍歷大數(shù)組和做大量計(jì)算時(shí)飞傀，應(yīng)當(dāng)使用計(jì)算屬性，除非你不希望得到緩存诬烹。
demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="abc">
我的姓名是----{{fullName}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app2 = new Vue({
el:'#abc',
data:{
firstName : 'Zhang',
lastName : 'Sanfeng'
},
computed:{
//計(jì)算屬性的默認(rèn)用法是getter函數(shù)
// fullName:function(){
// return this.firstName + ' '+this.lastName;
// }
//設(shè)置全成名字砸烦，就要調(diào)用set方法
fullName:{
get:function(){
return this.firstName + ' '+this.lastName;
},
set:function(newValue){
console.log('我是set方法。我被調(diào)用了')
//用逗號(hào)分隔 Liu,Bei
var names = newValue.split(',');//分隔為數(shù)組
this.firstName = names[0];
this.lastName = names[1];
}
}
}
})
</script>
</body>
</html>
