JavaScript与Vue.js前端侦听实例解析-优快云博客

本文探讨了在JavaScript和Vue.js中如何进行事件侦听，通过具体的代码示例，展示了在前端开发中监听并响应变化的重要性，帮助开发者更好地理解和应用这一技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.js"></script>
	</head>
	<body>
		<div id="app">
			<button @click='changeA'>修改a</button>
			<button @click='changeObj'>修改obj</button>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data(){
					return{
						a:10,
						b:20,
						obj:{
							a:10,
							b:{
								b2:777
							}
						}
					}
				},
				watch: {
					// 侦听就是当监测到数据发生改变时，就立马执行的一个方法
					// 侦听数据a => a发生改变时，马上执行对应方法
					// a(newVal,oldVal){
					// 	// 注: 侦听哪个数据，方法名就用哪个数据
					// 	console.log('a发生了改变')
					// 	// 方法中有固定参数
					// 	console.log(newVal+'----'+oldVal)
					// 	// 参数1 修改后的值
					// 	// 参数2 修改前的值
					// }
					// 注：侦听实在检测数据变化，只要数据变了就是执行对应方法
					//     侦听的核心就是这个方法，以及数据有没有发生改变
					//     和数据在页面上有没有使用没有关系
					
					// 注: 如果不做特殊操作，侦听方法只有在数据改变后才能执行
					//     第一次展示页面的时候,数据从无(undefined)到有(数据初始值)时不会执行
					
					// 问题:如何特殊操作，在第一次展示页面时就执行方法？
						a:{
							immediate:true, 
							// 让执行方法在第一次展示页面时马上执行
							// 侦听数据从undefined变成初始值
							handler(newVal,oldVal){
							// 注: 侦听哪个数据，方法名就用哪个数据
							console.log('a发生了改变')
							// 方法中有固定参数
							console.log(newVal+'----'+oldVal)
							// 参数1 修改后的值
							// 参数2 修改前的值
							}
						},
						obj(){
							console.log('obj发生了改变')
						}
				},
				methods: {
					changeA(){
						this.a = Math.random()
					},
					changeObj(){
						// this.obj.a = 200
						// console.log(this.obj) // 修改成功 属性a变成了200
						// 但是obj的侦听方法没有执行
						// obj是一个对象，保存的是一个地址
						// 修改其中的一个属性，并不会修改obj的地址
						// 也就是说数据obj没有发生改变，不会执行侦听方法
						
						this.obj = {
							a:200,
							b:{
								b2:777
							}
						}
						// 以上的修改方式，让obj变成了一个新对象
						// 地址发生了改变，所以会执行侦听方法
						// 但是显示这种修改方式不可取
						
						// 如何侦听对象中数据的改变呢？
					}
				}
			})
		</script>
	</body>
</html>

常用的写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./vue.js"></script>
	</head>
	<body>
		<div id="app">
			<button @click='changeA'>修改a</button>
			<button @click='changeObj'>修改obj</button>
		</div>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data(){
					return{
						a:10,
						obj:{
							o1:10,
							o2:{
								b:777
							}
						}
					}
				},
				methods: {
					changeA() {
						this.a = Math.random()
					},
					changeObj() {
						this.obj.o1 = Math.random()
						// this.obj.o2.b = Math.random()
					}
				},
				watch: {
					// a(newValue, oldValue) {
					// 	console.log('a发生了改变')
					// 	console.log(newValue, oldValue)
					// }
					// 以上为侦听的简写
					// 如果只是需要一个方法，不需要其他配置则使用简写
					// a:{
					// 	immediate:true,
					// 	handler(newValue, oldValue) {
					// 		console.log('a发生了改变')
					// 		console.log(newValue, oldValue)
					// 	}
					// },
					// obj:{
					// 	immediate:true,
					// 	deep:true, //深度侦听
					// 	// 用于 对象的侦听
					// 	// 当你需要侦听对象中数据的改变时，就使用深度侦听
						
					// 	// 深度侦听 => 对象中每一个属性发生改变，都可以侦听到
					// 	// 但是开发中大部分情况，都是只侦听对象的一个或者几个属性
					// 	// 使用深度侦听显然不合适，因为不侦听的属性改变也会执行方法
					// 	handler(newValue, oldValue){
					// 		console.log('obj发生了改变')
					// 		console.log(newValue, oldValue)
					// 	}
					// },
					// 只侦听对象的一个属性
					// 注: 必须把属性写成字符串
					// 'obj.o1'(newValue, oldValue){
					// 		console.log('obj的o1属性发生了改变')
					// 		console.log(newValue, oldValue)
					// },
					'obj.o1':{
						immediate:true,
						handler(newValue, oldValue){
							console.log('obj的o1发生了改变')
							console.log(newValue, oldValue)
						}
					}
				}
			})
		</script>
	</body>
</html>

侦听的例子