computed
computed 是计算属性
- computed 是用来计算一个值的,这个值调用的时候不需要加括号。
- computed 的值会被缓存,如果依赖的响应式 property 不变,就不会重新计算。
计算属性不在 data 中,计算属性新值的相关已知值在 data 中。别人变化影响自身。
const vm = new Vue({
data: { a: 1 },
computed: {
// 只读
aDouble: function () {
return this.a * 2
},
// 读写
aPlus: {
get: function () {
return this.a + 1
},
set: function (v) {
this.a = v - 1
}
}
}
})
vm.aPlus // => 2
vm.aPlus = 3
vm.a // => 2
vm.aDouble // => 4
watch
watch 是监听数据的变化
监听 data 中数据的变化,监听的数据就是 data 中的已知值。自身变化影响别人。
如果某个属性变化了,就会执行一个回调函数。
提供两个选项,immediate
回调会在监听开始之后被立即调用;deep
回调会在任何被监听的对象的 property 改变时被调用,不管嵌套的层级深度。
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',
// 该回调会在任何被侦听的对象的 property 改变时被调用,不论其被嵌套多深
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
},
// 该回调将会在侦听开始之后被立即调用
d: {
handler: 'someMethod',
immediate: true
},
// 你可以传入回调数组,它们会被逐一调用
e: [
'handle1',
function handle2 (val, oldVal) { /* ... */ },
{
handler: function handle3 (val, oldVal) { /* ... */ },
/* ... */
}
],
// watch vm.e.f's value: {g: 5}
'e.f': function (val, oldVal) { /* ... */ }
}
})
vm.a = 2 // => new: 2, old: 1
总结
- computed 擅长处理的场景:一个数据受多个数据影响
- watch 擅长处理的场景:一个数据影响多个数据