侦听器

基本用法

Watch侦听器允许开发者监视数据变化，从而针对数据的变化做出特定的操作。

代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<body>
    <div id='app'> 
       
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                username: ''
            },
            watch: {
                // 监听username值的变化
                // newVal是变化后的值，oldVal是变化前的值。
                username(newVal, oldVal) {
                    console.log(newVal, oldVal)
                }
            }
        })
    </script>
</body>

监听器使用axios发起Ajax请求

1
2
3
4
5
6
7
8
watch: {
	async username(newVal) {
		if(newVal === '')   return
		const { data: res } = await axios.get('http://xxxx/' + newVal)
		console.log(res)
	}
}
//async搭配await使用，将异步请求改为同步请求。

immediate选项

默认情况下，组件初次加载完毕不会调用watch侦听器，如果想让watch侦听器立即被调用，需要使用immediata选项。

1
2
3
4
5
6
7
8
9
10
11
12
watch: {
	username: {
        //handler是固定写法，表示当username变化时候自动调用handler函数
		handler: async function(newVal){
			if(newVal === '')   return
			const { data: res } = await axios.get('http://xxxx/' + newVal)
			console.log(res)
		},
        //immediate表示页面初次渲染后就触发watch侦听器
		immediate: true
	}
}

deep选项

如果watch侦听一个对象，对象的属性值发生变化，无法被监听到。

此时，需要使用deep选项来监听对象属性的变化。

1
2
3
4
5
6
7
8
9
10
11
watch: {
	username: {
        //handler是固定写法，表示当username变化时候自动调用handler函数
		handler(newVal){
			console.log(newVal.username)
		},
        //immediate表示页面初次渲染后就触发watch侦听器
		immediate: true
		deep: true
	}
}

监听对象指定属性

如果只想监听对象中单个属性的变化，可以按照如下方式定义watch侦听器：

1
2
3
4
5
6
7
8
9
10
11
12
13
const vm = new Vue({
	el: '#app',
	data: {
		info: { username: 'admin' }
		},
	watch: {
		'info.username': {
			handler(newVal) {
				console.log(newVal)
			}
		}
	}
})