Vue 中可以通过 watch 自定义侦听器,来响应数据的变化,支持对 data,props,computed 中的数据进行监听。
基本用法
基本类型监听
data () {
return {
name: '小黑',
age: 300,
isSpirit: true
}
},
watch: {
name: function (newVal, oldVal) {
console.log('name发生了变化:newVal:' + newVal + ',oldVal:' + oldVal)
},
age (newVal, oldVal) {
console.log('age发生了变化:newVal:' + newVal + ',oldVal:' + oldVal)
},
isSpirit: function (newVal, oldVal) {
console.log('isSpirit发生了变化:newVal:' + newVal + ',oldVal:' + oldVal)
}
},
methods: {
changeData () {
this.name = '小白'
this.age = 10
this.isSpirit = false
}
}
以上代码中,对于 age 的监听,是 es6 的写法。
注意:不应该使用箭头函数来定义 watcher 函数 。官网解释如下:
数组和对象的监听
数组:
data () {
return {
list: [
{ id: '1', name: 'A' },
{ id: '2', name: 'B' },
{ id: '3', name: 'C' }
]
}
},
watch: {
list: function (newVal, oldVal) {
console.log('list发生了变化.')
}
},
methods: {
changeData1 () {
this.list.push({ id: '4', name: 'D' })
},
changeData2 () {
this.list[0].name = 'Z'
}
}
以上代码,当 changeData1 触发时,可以触发 list 的监听回调函数,而 changeData2 触发时,不会触发 list 的监听回调函数。
changeData1 和 changeData2 的区别:
- changeData1 改变了数组的长度。
- changeData2 数组长度不变,数组中元素内容改变。
如果想要数组元素改变也触发监听回调函数,只有函数显然不支持。这时需要使用对象,添加 deep 配置。
watch: {
list: {
handler (newVal, oldVal) {
console.log('list发生了变化.')
},
deep: true
},
}
对象:
对象和数组类似。
data () {
return {
object: {
id: '001',
name: '对象',
info: {
type: 'sub',
name: '嵌入对象'
}
}
}
},
watch: {
object: function (newVal, oldVal) {
console.log('object发生了变化.')
}
},
methods: {
changeData3 () {
this.$set(this.object, 'type', 'out')
},
changeData4 () {
this.$set(this.object, 'name', 'haha')
}
}
changeData3 可以触发object 监听回调函数,changeData4 不可以触发。如果 changeData4 也想触发,也需要使用对象形式:
watch: {
object: {
handler (newVal, oldVal) {
console.log('object发生了变化.')
},
deep: true
}
}
对于上边的 object ,如果只想监听 object 中的 name ,对于其他数据并不关心。可以采用如下写法:
watch: {
"object.name": function (newVal, oldVal) {
console.log('object中name发生了变化.')
}
}
路由的监听
watch: {
$route: {
handler (to, from) {
console.log(to)
console.log(from)
}
}
}
对于路由的监听,需要注意的是,并不是所有组件中的路由监听都会触发。
情景一:
path:'/index/a',对应组件a,path:'/index/b',对应组件b。在 a 组件和 b 组件中对于路由的监听,不会触发。
原因:个人认为是,路由切换,组件渲染,在组件渲染的时候,路由的变化已经完成了,故监听不到路由的变化。
情景二:
path:'/index/a' 对应组件A,path:'/index/b',对应组件B。A组件中有router-view,A组件对应的路由中有嵌套路由 path:'/index/a/c' 和 path:'/index/a/d'。在组件A中可以监听到 c -> d,d -> c 的路由变化,但是对于 a ,b 之间的路由变化则监听不到。
情景三:
有一个公共组件 ls-header ,无论页面如何变化,该组件,一直显示在页面顶部。ls-eader 中可以监听到所有路由的变化。
值的四种形式
watch 方法对应一个对象,键是观察表达式,值是对应回调。
{ [key: string]: string | Function | Object | Array }
值的类型可以是:字符串,函数,对象和数组。
watch: {
a: 'someMethod', // someMethod对应方法名
b: function (val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
c: {
handler: function (val, oldVal) { /* ... */ },
deep: true
},
// 可以传入回调数组,它们会被逐一调用
e: [
'handle1',
function handle2 (val, oldVal) { /* ... */ },
{
handler: function handle3 (val, oldVal) { /* ... */ },
/* ... */
}
]
}
参数配置
当 watch 的值为对象时,支持一些参数配置。
- deep: true // 深度监听
- immediate: true // 回调将会在侦听开始之后被立即调用
- sync: true // 提升优先级
当 watch 中多个回调被触发时,执行的顺序为书写的顺序。
watch: {
name: function (newVal, oldVal) {
console.log('name发生了变化:newVal:' + newVal + ',oldVal:' + oldVal)
},
age (newVal, oldVal) {
console.log('age发生了变化:newVal:' + newVal + ',oldVal:' + oldVal)
},
isSpirit: function (newVal, oldVal) {
console.log('isSpirit发生了变化:newVal:' + newVal + ',oldVal:' + oldVal)
}
},
methods: {
changeData () {
this.age = 10
this.isSpirit = false
this.name = '小白'
}
}
以上代码,当 age,name,isSpirit 都有变化时,watch 的执行顺序:
如果想要 isSpirit 的回调先执行,可以设置 sync: true
watch: {
isSpirit: {
handler (newVal, oldVal) {
console.log('isSpirit发生了变化:newVal:' + newVal + ',oldVal:' + oldVal)
},
sync: true
}
}
修改之后,watch 执行顺序:
如果有多个都添加了 sync: true,依然按照书写顺序执行。如上,如果 age 和 isSpirit 都设置 sync: true,watch 执行顺序: