计算属性computed
computed的概念
Vue的计算属性computed
用于返回一个计算值,如果用于计算这个计算值的data
的属性(即依赖的响应式 property
)发生变化,计算值也会相应的发生变化。
var 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
computed的缓冲特性
computed
有时可以被methods
代替,可以简单的理解为不需要写()的method
方法。
但区别于methods
每次调用都会执行计算,computed
的结果会被缓存,除非依赖的响应式 property
变化才会重新计算。
监听选项watch
watch的概念
Vue的选项watch
用于监听某个变量的变化,如果变量变化则异步地执行watch
中对应的函数。
var vm = new Vue({
data:{
a : 1
},
watch:{
//监听变量a的变化,如果变化就执行function
a:function(newValue,oldValue){
console.log('new: %s, old: %s', val, oldVal)
}
}
})
vm.a = 2 //输出:new: 2, old: 1
watch的两个重要选项
-
选项:deep:
为了发现对象内部值的变化,可以在选项参数中指定 deep: true。(也就是说一般情况下,如果你监听某个对象obj
,如果对象的属性发生变化obj.a = 2
,watch
是不会发现的)vm.$watch('someObject', callback, { deep: true }) vm.someObject.nestedValue = 123 // callback is fired
-
选项:immediate
在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调:vm.$watch('a', callback, { immediate: true }) // 立即以 `a` 的当前值触发回调