用一個(gè)例子來說明一下吧：
<div id="demo">
<p>message: "{{ message }}"</p>
<p>reversed message: "{{ reversedMessage }}"</p>
<button @click="add">add</button>
<p>點(diǎn)擊次數(shù):{{num}}</p>
</div>
var vm = new Vue({
el: '#demo',
data: {
message : 'abcde',
num: 0
},
watch: {
// 監(jiān)聽數(shù)據(jù)的變化做出對(duì)應(yīng)的改變尝哆，并不會(huì)生成新的屬性
num (newVal) {
if (newVal > 5) this.alert()
}
},
methods: {
alert () {
alert('點(diǎn)擊次數(shù)達(dá)到'+this.num+'次啦')
},
add () {
this.num += 1
}
},
computed: {
// 根據(jù)原有值生成一個(gè)新的屬性值
reversedMessage () {
return this.message.split('').reverse().join('')
}
}
})
methods: 存放的方法是一些內(nèi)部方法沮尿、事件的回調(diào)、命令是調(diào)用的方法较解。
watch: 用于監(jiān)聽數(shù)據(jù)的實(shí)時(shí)的變化畜疾。在數(shù)據(jù)變化的回調(diào)中執(zhí)行異步操作或者開銷很大的時(shí)候使用。
computed: 也是實(shí)時(shí)監(jiān)聽數(shù)據(jù)變化印衔，做出相應(yīng)的變化啡捶，跟watch不同的是他可以被看成一個(gè)data里面的屬性值來使用。所以當(dāng)我們需要監(jiān)聽一個(gè)值并且需要生成一個(gè)新的屬性時(shí)就可以使用computed奸焙。
cumputed vs methods
有些時(shí)候computed和methods可以完成同樣的事情瞎暑，但是computed是基于它們的依賴進(jìn)行緩存的，而methods需要每次去計(jì)算与帆。
<p>reversed message: "{{ reversedMessage() }}"</p>
{
methods: {
reversedMessage () {
return this.message.split('').reverse().join('')
}
}
}
computed只有在他依賴的數(shù)據(jù)發(fā)生變化時(shí)才會(huì)求值了赌。依賴不發(fā)生改變，每次訪問computed應(yīng)該是之前的計(jì)算結(jié)果玄糟。
也就是說需要緩存的話可以使用computed來實(shí)現(xiàn)勿她，不需要的話可以用其他方式代替。
cumputed vs watch
官方的例子
<div id="demo">{{ fullName }}</div>
// 用watch實(shí)現(xiàn)
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
// 用computed實(shí)現(xiàn)
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
很明顯computed實(shí)現(xiàn)起來更簡(jiǎn)潔更方便也更容易理解阵翎。
當(dāng)你有一些數(shù)據(jù)需要隨著其它數(shù)據(jù)變動(dòng)而變動(dòng)時(shí)逢并，你很容易濫用 watch之剧。然而，通常更好的想法是使用計(jì)算屬性而不是命令式的 watch 回調(diào)砍聊。
computed 的 setter 和 getter
默認(rèn)情況下 只有 getter背稼，不過在需要時(shí)你也可以提供一個(gè) setter
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
現(xiàn)在再運(yùn)行 vm.fullName = 'John Doe' 時(shí)，setter 會(huì)被調(diào)用玻蝌，vm.firstName 和 vm.lastName 也相應(yīng)地會(huì)被更新蟹肘。
雖然計(jì)算屬性在大多數(shù)情況下更合適，但有時(shí)也需要一個(gè)自定義的 watcher俯树。這是為什么 Vue 通過 watch 選項(xiàng)提供一個(gè)更通用的方法疆前，來響應(yīng)數(shù)據(jù)的變化。當(dāng)你想要在數(shù)據(jù)變化響應(yīng)時(shí)聘萨，執(zhí)行異步操作或開銷較大的操作竹椒，這是很有用的。
