vue入门笔记系统（四）computed和watch

computed

场景：当需要对data的数据举行显现盘算时；

var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 盘算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})

盘算属性缓存 vs 要领

盘算属性是基于它们的依靠举行缓存的。盘算属性只需在它的相干依靠发作转变时才会从新求值。（不接收新的参数，只是基于data内里的数据举行盘算）
要领是只需其他数据发作变化，触发从新衬着时，挪用要领将总会再次实行函数，机能开支比较大。（能够接收参数）

watch

场景：监听到数据的变化，去指定相应的操纵

var vm = new Vue({
data: {
a: 1,
b: 2,
c: 3,
d: 4,
e: {
f: {
g: 5
}
}
},
watch: {
a: function (val, oldVal) { //变化后的值，变化前的值
console.log('new: %s, old: %s', val, oldVal)
},
// 要领名
b: 'someMethod',
// 深度 watcher，能够视察objecct的一切数据变化，机能开支比较大；能够监听'e.a'这个属性举行监听
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
},
// 该回调将会在侦听最先以后被马上挪用
d: {
handler: function (val, oldVal) { /* ... */ },
immediate: true
},
e: [
function handle1 (val, oldVal) { /* ... */ },
function handle2 (val, oldVal) { /* ... */ }
],
// watch vm.e.f's value: {g: 5}
'e.f': function (val, oldVal) { /* ... */ }
}
})
vm.a = 2 // => new: 2, old: 1