侦听器-了解侦听器的基本语法格式

什么是watch侦听器

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

  1. 方法格式的侦听器

    • 缺点1：无法在刚进入页面的时候，自动触发！！！！
    • 缺点2：如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器！！！

  2. 对象格式的侦听器

    • 好处1：可以通过immeaiate选项，让侦听器自动触发！！！
    • 好处2：可以通过deep选项，让侦听器深度监听对象中每个属性的变化！！！

语法格式如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="username" />
		</div>
		<script src="lib/vue-2.6.12.js"></script>
		<script>
			const vm = new Vue({
				el: '#app',
				data: {
					username: ''
				},
				// 所有的侦听器，都应该被定义到watch节点下
				watch: {
					// 侦听器本质上是一个函数，要监视哪个数据的变化，就把数据名作为方法名即可
					// 新值在前，旧值在后
					username(newVal, oldVal) {
						console.log('监听到了username值的变化', newVal, oldVal)
					}
				}
			})
		</script>
	</body>
</html>
posted @ 2023-06-09 00:29  Young_Yang_Yang  阅读(5)  评论(0)  编辑  收藏  举报