理解computed并不難锅必，但是我認(rèn)為結(jié)合methods和watch去理解的話，會更透徹更有條理，所以整理了下面的知識：
我的其他文章，也可以了解一下：
【使用vue-cli（vue腳手架）快速搭建項(xiàng)目】：http://www.reibang.com/p/1ee1c410dc67
【vue之父子組件間通信實(shí)例講解（props镜廉、ref 、 emit ）】：
http://www.reibang.com/p/91416e11f012
【vue之將echart封裝為組件】：
http://www.reibang.com/p/ec39019e2141
【理解vue實(shí)例的生命周期和鉤子函數(shù)】：
http://www.reibang.com/p/98517bd49179
【vue之事件修飾符的使用】：
http://www.reibang.com/p/cbe77baee153
1. 從methods的角度理解
我們可以在模板內(nèi)使用表達(dá)式進(jìn)行簡單的計(jì)算：
<template>
<div> Reversed message: "{{ message + 'OPQ'}}"</div>
</template>
但是對于相對復(fù)雜一點(diǎn)的邏輯愚战，我們一般會調(diào)用方法處理然后再返回結(jié)果:
<template>
<div> Reversed message: "{{revMessage()}}"</div>
</template>
<script type="text/javascript">
export default {
data() {
return {
message: "ABCDEFG"
}
},
methods: {
revMessage: function () {
return this.message.split('').reverse().join('')
}
}
}
</script>
methods很好的處理了這些相對復(fù)雜的邏輯計(jì)算娇唯，但是methods有兩個特性：
- methods是交互方法齐遵，需要主動去觸發(fā)
- methods每次計(jì)算后都會把變量回收，再次訪問的時候會重新計(jì)算塔插。
如果想緩存計(jì)算結(jié)果梗摇，這個時候就可以用到computed了：
<template>
<div> Reversed message: "{{revMessage}}"</div>
</template>
<script type="text/javascript">
export default {
data() {
return {
message: "ABCDEFG"
}
},
computed: {
revMessage: function () {
return this.message.split('').reverse().join('')
}
}
}
</script>
為了更理解computed的特性，我們通過調(diào)試臺改變message的值：
我們可以看到佑淀，在改變message的值之前留美，使用methods和computed得到的結(jié)果是一樣彰檬，而當(dāng)我們?nèi)ジ淖僲essage的值以后會自動觸發(fā)revMessage伸刃，對字符串進(jìn)行翻轉(zhuǎn)。
通過上面的例子逢倍，應(yīng)該能大概理解computed相對于methods的一些特性了捧颅，下面我還是進(jìn)行一下總結(jié)：
- methods是交互方法需要主動去觸發(fā)，而computed則是在檢測到data數(shù)據(jù)變化時自動觸發(fā)的较雕。
- methods是一次性無緩存的計(jì)算碉哑，computed則是有緩存的亮蒋。methods每次計(jì)算后都會把變量回收扣典，再次訪問的時候會重新計(jì)算。而computed則是依賴數(shù)據(jù)的慎玖，數(shù)據(jù)占用內(nèi)存是不會被回收掉的，再次訪問的時候不會重新計(jì)算趁怔，而是返回上次計(jì)算的值湿硝，當(dāng)依賴的數(shù)據(jù)發(fā)生改變時才會再次計(jì)算。
2. 從watch的角度理解
理解了methods和computed兩者的區(qū)別以后润努，熟悉AngularJS或者Avalon.js的人可能會發(fā)現(xiàn)关斜，其實(shí)computed和watch迷之相似，都是在關(guān)注一個數(shù)據(jù)铺浇，并在數(shù)據(jù)發(fā)生變化的時候做出反應(yīng)痢畜。沒錯，很相像鳍侣，但是vue認(rèn)為大部分時候使用計(jì)算屬性裁着，會比使用watch監(jiān)聽更優(yōu)，我們看看下面兩個的例子：
//watch的例子
<template>
<div>message: {{all}}</div>
</template>
<script type="text/javascript">
export default {
data() {
return {
all:'ABCEFG',
message1:'ABC',
message2:'EFG'
}
},
watch: {
message1: function (val) {
this.all = val+ this.message2
},
message2: function (val) {
this.all = this.message1+ val
}
},
mounted(){
window.vue = this
}
}
</script>
//computed的例子
<template>
<div>message: {{all}}</div>
</template>
<script type="text/javascript">
export default {
data() {
return {
message1:'ABC',
message2:'EFG'
}
},
computed: {
all: function () {
return this.message1 + this.message2
},
},
mounted(){
window.vue = this
}
}
</script>
這兩段代碼都是在做同一件事拱她，監(jiān)聽message1和message2二驰，在任何一個數(shù)據(jù)有變化的時候觸發(fā)回調(diào)，更新兩者合并的值秉沼。但是可以看到桶雀，使用watch的話需要分開兩次去監(jiān)聽矿酵，然后再分開兩邊執(zhí)行回調(diào)，相比之下使用computed簡練的多了矗积。
當(dāng)然全肮，不是所有情況下使用computed都會更優(yōu)，可以看看官網(wǎng)的解釋：#watch偵聽器#
