vue

2023-12-19 05:16| 来源: 网络整理| 查看: 265

Vue内watch侦听器详解

watch是vue内部提供的一个用于侦听功能的更通用的方法，其用来响应数据的变化，通过特定的数据变化驱动一些操作。 vue官方文档解释当需要在数据变化时执行异步或开销较大的操作时，推荐使用该方法。

export default { data(){ variable:null, }, watch:{ // 此处监听variable变量，当期有变化时执行 variable(item1,item2){ // item1为新值，item2为旧值 } } }

如上代码所示：当变量variable产生变化时，会被页面侦听到并执行相关的操作。

也可以这样写： export default { data(){ variable:null, }, watch:{ variable:{ // 此处监听variable变量，当期有变化时执行 handler(item1,item2){ // item1为新值，item2为旧值 } } } } immediate用法

上面是watch侦听器的普通用法，就是当未设置immediate或者immediate的值为false时，被侦听的变量在页面初次加载时第一次绑定值的时候，并不会执行监听操作；但是当设置了immediate的值为true时，则会立刻执行一次监听操作。

export default { data(){ variable:null, }, watch:{ // 此处监听variable变量，当期有变化时执行 variable(item1,item2){ // item1为新值，item2为旧值 }, immediate:true // watch侦听操作内的函数会立刻被执行 } } deep深度监听

侦听普通变量的变化是使用以上方法，当侦听的某个变量值是对象时则不起作用，这时需要使用deep深度监听。

export default { data(){ obj:{ a:'' }, }, watch:{ // 此处监听obj属性a值变量 'obj.a'(item1,item2){ // item1为新值，item2为旧值 }, deep:true } }

如果对象内有多个属性，并采用以下写法，则对象内每个属性都会被侦听，每个属性的变化都会执行一次侦听操作。

export default { data(){ obj:{ a:'', b:'', c:'' }, }, watch:{ obj:{ // 此处监听obj属性a值变量 handler(item1,item2){ // item1为新值，item2为旧值 }, deep:true } } }

数组（一维、多维）的变化不需要深度监听，对象数组中对象的属性变化则需要deep深度监听（待验证）。

验证： 1.数组（一维、多维）变化 export default { data(){ newArr:[1,2,3,4], testArr:[[1,2,3],4,5] }, watch:{ newArr(val){ // ... }, testArr(val){ // ... }, } } 2.对象属性变化

对象内某个属性产生变化，直接监听该对象是监测不到变化的，只能监听该对象的属性变化。

export default { data(){ newObj:{ a:'a', b:2 }, }, watch:{ 'newObj.a'(val){ // ... }, } } 3.数组对象中对象属性变化

数组对象中对象属性变化监测需要使用deep:true，多少层内产生变化都可以监测到。

export default { data(){ newArr:[ { list:[ { label:null } ] } ] }, methods:{ show(){ this.newArr[0].list[0].label = "2020年11月10日10:36:58"; } }, watch:{ newArr:{ handler(val){ // ... }, deep:true }, } }

【本文地址】

vue

vue

今日新闻

推荐新闻