配置项
vue-watch
有两个可配置项 deep
、immediate
,分别表示是否深度监听及是否立即调用
定义形式
监听目标 key
监听目标
的定义形式包括:普通key
、字符串
、函数
(仅 $watch
)
- 普通key:
name: function() {}
,name(){}
- 字符串:监听具体深层属性
a.b.c
、监听当前路由信息$route
- 函数:仅可在
$witch
中定义,可同时监听多个数据变化,可以通过监听computed
的返回值来达到同样的效果
响应事件 value
响应事件
的定义形式包括:函数
、对象
、字符串
、数组
- 函数:接受两个参数:
新数据
及旧数据
- 对象:可定义三个属性,
handler
、deep
、immediate
;handler
为数据变化后的回调函数,后两者为配置项 - 字符串:设置回调为
methods
中的同名方法 - 数组:元素为上述三种形式,数据变化时会依次触发
示例
watch选项
var vm = new Vue({
data: {
a: 1,
b: 2,
c: 3,
d: 4,
e: {
f: {
g: 5
}
}
},
watch: {
newA(val, oldVal) {
console.log('监听computed的值实现监听多个数据变化', val, oldVal)
},
a: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// methods选项中的方法名
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) { /* ... */ },
immediate: true
}
],
// 侦听表达式
'e.f': function (val, oldVal) { /* ... */ }
},
computed: {
newA() {
return this.a + this.b;
}
}
})
$watch实例方法
$watch
返回一个取消观察函数,用来停止触发回调
let unwatch = vm.$watch(
function () {
// 表达式 `this.a + this.b` 每次得出一个不同的结果时
// 处理函数都会被调用。
// 这就像监听一个未被定义的计算属性
return this.a + this.b
},
function (newVal, oldVal) {
// 做点什么
},{ // 三参为配置对象
deep: true
}
)
unwatch(); // 停止监听
监听多个数据变化
watch
中通过监听computed
实现vm.$watch
中通过一参传入函数实现