# 第三章 計(jì)算屬性
>[success] 可在此處查看運(yùn)行文檔中的代碼示例結(jié)果：[https://github.com/jianyaoo/Vue](https://github.com/jianyaoo/Vue)
[toc]
## 基礎(chǔ)
**<span style="padding-top:15px;display:inline-block">背景</span >**
插值語(yǔ)法可以在模板中使用表達(dá)式進(jìn)行計(jì)算，目的是用于簡(jiǎn)單計(jì)算。但是當(dāng)邏輯比較復(fù)雜且比較多時(shí)，會(huì)使模板太過(guò)繁重而難以維護(hù)。
**<span style="padding-top:15px;display:inline-block;">用處</span>**
計(jì)算屬性用于處理復(fù)雜邏輯的表達(dá)式。
**<span style="padding-top:15px;display:inline-block;">如何使用</span>**
計(jì)算屬性在模板中與普通屬性用法一致。但是寫(xiě)在實(shí)例的computed屬性內(nèi)，一般是一個(gè)函數(shù)，執(zhí)行結(jié)果返回一個(gè)確切的值。
**<span style="padding-top:15px;display:inline-block;">基礎(chǔ)示例</span>**
```JavaScript
<body>
<div id="app">
<p>{{getNewData}}</p>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:"hello,vue",
},
computed:{
getNewData:function () {
return this.msg.split(",").reverse().join("&");
},
},
})
</script>
</body>
```
## 計(jì)算屬性的setter方法
計(jì)算屬性默認(rèn)只有g(shù)etter函數(shù)，所以一般來(lái)說(shuō)：計(jì)算屬性是一個(gè)可以返回確切值得函數(shù)（即默認(rèn)的getter函數(shù)）。但是也可以手動(dòng)設(shè)置setter函數(shù)觸發(fā)一些事件。
**<span style="padding-top:15px;display:inline-block;">觸發(fā)方法</span>**
手動(dòng)修改計(jì)算屬性的值得時(shí)候就會(huì)觸發(fā)計(jì)算屬性的setter方式。**修改計(jì)算屬性的值得方法和修改普通屬性的值的方法一致，例如上例中修改計(jì)算屬性的值則為：vm.getNewData = "hello,world"**
**<span style="padding-top:15px;display:inline-block;">代碼實(shí)例</span>**
```
<body>
<div id="app">
<p>{{updataNewData}}</p>
<button @click="handleClick">設(shè)置msg值</button>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:"hello,vue",
},
computed:{
updataNewData:{
get:function () {
console.log("計(jì)算屬性");
return this.msg.split(",").reverse().join("!!!");
},
set:function (value) {
this.msg = value;
},
}
},
methods:{
handleClick:function () {
this.updataNewData = "seen,flag";
}
}
})
</script>
</body>
```
**<span style="padding-top:15px;display:inline-block;">執(zhí)行說(shuō)明</span>**
* 在模板中首先渲染的為msg的vue!!!hello
* 點(diǎn)擊按鈕，修改計(jì)算屬性的值，觸發(fā)計(jì)算屬性的setter函數(shù)
* setter函數(shù)修改了計(jì)算屬性的依賴(lài)屬性值
* 計(jì)算屬性重新計(jì)算，重新渲染最后模板渲染為flag!!!seen
## 計(jì)算屬性的緩存
>[info] 計(jì)算屬性的本質(zhì)是一個(gè)可以返回確切值的函數(shù)，所以能夠通過(guò)計(jì)算屬性實(shí)現(xiàn)的代碼使用methods屬性定義的函數(shù)能夠達(dá)到相同的目的。
**<span style="padding-top:15px;display:inline-block;">計(jì)算屬性的緩存機(jī)制</span>**
計(jì)算屬性時(shí)基于依賴(lài)值進(jìn)行緩存的。當(dāng)依賴(lài)值不發(fā)生變化的時(shí)候，計(jì)算屬性就不會(huì)重新請(qǐng)求，可以直接獲取到計(jì)算屬性的值。只有依賴(lài)值發(fā)生改變的時(shí)候，計(jì)算屬性才會(huì)重新執(zhí)行計(jì)算。
**<span style="padding-top:15px;display:inline-block;">計(jì)算屬性 vs 函數(shù)</span>**
什么時(shí)候使用計(jì)算屬性，性能開(kāi)銷(xiāo)比較大。比如大量數(shù)組且要做大量計(jì)算時(shí)，又有其他計(jì)算屬性依賴(lài)該屬性時(shí)。
什么時(shí)候時(shí)候函數(shù)，需要傳參且不需要緩存
**<span style="padding-top:15px;display:inline-block;">計(jì)算屬性與函數(shù)的代碼實(shí)例</span>**
```
<body>
<div id="app">
<p>{{updataNewData}}</p>
<p>{{getMessage()}}</p>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:"hello,vue",
},
computed:{
updataNewData:function(){
return this.msg.split(",").reverse().join("!!!");
},
},
methods:{
getMessage:function () {
return this.msg.split(",").reverse().join("!!!")
}
}
})
</script>
</body>
```
## 計(jì)算屬性與偵聽(tīng)屬性
**<span style="padding-top:15px;display:inline-block;">什么是偵聽(tīng)屬性</span>**
偵聽(tīng)屬性是寫(xiě)在實(shí)例的watch屬性中的函數(shù)，偵聽(tīng)某個(gè)值，當(dāng)該值發(fā)生變化時(shí)觸發(fā)監(jiān)聽(tīng)函數(shù)
**<span style="padding-top:15px;display:inline-block;">代碼實(shí)例</span>**
```
<body>
<div id="app">
<p>{{getMessage()}}</p>
<p>{{watchMsg}}</p>
<button @click="handleClick">設(shè)置msg值</button>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:"hello,vue",
watchMsg:""
},
computed:{
getNewData:function () {
return this.msg.split(",").reverse().join("!!!");
},
},
watch:{
msg:function (val) {
this.watchMsg = this.msg.split(",").reverse().join("!");
}
},
methods:{
handleClick:function () {
this.msg= "seen,flag";
}
}
})
</script>
</body>
```
**<span style="padding-top:15px;display:inline-block;">監(jiān)聽(tīng)和計(jì)算屬性的區(qū)別</span>**
* 監(jiān)聽(tīng)屬性有一個(gè)對(duì)應(yīng)的監(jiān)聽(tīng)字段，用來(lái)記錄值變化后產(chǎn)生的影響。即案例中的watchMsg
* 計(jì)算屬性是當(dāng)依賴(lài)值發(fā)生變化時(shí)，修改函數(shù)的返回值。
* 偵聽(tīng)屬性是偵聽(tīng)值發(fā)生變化時(shí)觸發(fā)偵聽(tīng)事件，直接修改偵聽(tīng)屬性的值
## 偵聽(tīng)器
> 當(dāng)數(shù)據(jù)變化時(shí)需要異步或者開(kāi)銷(xiāo)比較大時(shí)，可以使用自定義的偵聽(tīng)器。
- 第一篇 基礎(chǔ)篇
- 01 - 初始 vue
- 02 - 數(shù)據(jù)綁定
- 03 - 計(jì)算屬性
- 04 - v-bind及class與style綁定
- 05 - 內(nèi)置指令
- 06 - 表單與v-model
- 07 - 組件
- 08 - 自定義指令
- 文檔模板
- 第二篇 進(jìn)階篇
- 01 - Render函數(shù)
- 02 - webPack
- 03 - 插件
- 第三篇 實(shí)戰(zhàn)篇
- 01 - iview經(jīng)典組件剖析
- 02 - 知乎日?qǐng)?bào)項(xiàng)目開(kāi)發(fā)
- 03 - 電商網(wǎng)站開(kāi)發(fā)
- 04 - 相關(guān)開(kāi)源介紹