欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue-watch监听功能(侦听器)详解&使用

程序员文章站 2022-02-19 06:33:48
...

Vue内watch侦听器详解

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

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

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

也可以这样写:
<template>
	<div></div>
</template>
<script>
	export default {
		data(){
			variable:null,
		},
		watch:{
			variable:{
				// 此处监听variable变量,当期有变化时执行
				handler(item1,item2){
					// item1为新值,item2为旧值
				}
			}
		}
	}
</script>

immediate用法

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

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

deep深度监听

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

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

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

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

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

相关标签: vue.js vue vue.js