vue note 续篇 watch
watch
Vue 通过 watch 选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的
1 | watch: { |
实例方法
1 | vm.$watch( expOrFn, callback, [options] ) |
注意:在变异 (不是替换) 对象或数组时,旧值将与新值相同,因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。
实例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21// 键路径
vm.$watch('a.b.c', function (newVal, oldVal) {
// 做点什么
})
// 函数
vm.$watch(
function () {
// 表达式 `this.a + this.b` 每次得出一个不同的结果时
// 处理函数都会被调用。
// 这就像监听一个未被定义的计算属性
return this.a + this.b
},
function (newVal, oldVal) {
// 做点什么
}
)
//vm.$watch 返回一个取消观察函数,用来停止触发回调:
var unwatch = vm.$watch('a', cb)
// 之后取消观察
unwatch()选项:deep
为了发现对象内部值的变化,可以在选项参数中指定 deep: true 。注意监听数组的变动不需要这么做。1
2
3
4
5vm.$watch('someObject', callback, {
deep: true
})
vm.someObject.nestedValue = 123
// callback is fired选项:immediate
在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调:1
2
3
4vm.$watch('a', callback, {
immediate: true
})
// 立即以 `a` 的当前值触发回调
computed
对于任何复杂逻辑,你都应当使用计算属性。
computed和方法差不多调用也只有一个括号差别,但是计算属性是基于它们的响应式依赖进行缓存的
只在相关响应式依赖发生改变时它们才会重新求值,相比之下,每当触发重新渲染时,调用方法将总会再次执行函数,如果你有一个for循环计算,调用次数较多就可以考虑用计算属性