vue指令 （侦听器）

在Vue中，watch 选项允许我们观察和响应Vue实例上的数据变化。当被侦听的属性变化时，回调函数将被调用，执行相应的操作。

以下是一个简单的示例，演示了如何使用 watch 选项：

 
	new Vue({ 
 
	el: '#app', 
 
	data: { 
 
	message: 'Hello Vue!' 
 
	}, 
 
	watch: { 
 
	// 侦听 'message' 数据属性的变化 
 
	message: function(newVal, oldVal) { 
 
	// 当 'message' 数据变化时，此函数会被调用 
 
	// newVal 是变化后的新值 
 
	// oldVal 是变化前的旧值 
 
	console.log('Message changed from', oldVal, 'to', newVal); 
 
	} 
 
	} 
 
	});

在这个例子中，我们定义了一个名为 message 的数据属性，并使用 watch 选项来侦听它的变化。当 message 的值发生变化时，侦听器的回调函数将被调用，并且控制台将输出一条消息，显示旧值和新值。

watch 选项还可以接受一个包含 deep 和 immediate 选项的对象作为第三个参数：

• deep：如果侦听的是一个对象，默认情况下，只有当对象的属性发生变化时，侦听器才会被触发。如果需要将对象内部的嵌套属性变化也侦听进来，就需要设置 deep 选项为 true。

• immediate：默认情况下，侦听器在实例初始化之后不会立即调用。如果需要在初始化时立即调用侦听器，可以设置 immediate 选项为 true。

以下是一个使用 deep 和 immediate 选项的示例：

 
	new Vue({ 
 
	el: '#app', 
 
	data: { 
 
	user: { 
 
	name: 'Alice', 
 
	age: 25 
 
	} 
 
	}, 
 
	watch: { 
 
	user: { 
 
	handler: function(newVal, oldVal) { 
 
	console.log('User changed from', oldVal, 'to', newVal); 
 
	}, 
 
	deep: true, // 深度侦听 
 
	immediate: true // 立即执行 
 
	} 
 
	} 
 
	});

在这个例子中，user 是一个对象，并且我们设置了 deep: true，这意味着如果 user 对象中的任何嵌套属性发生变化，侦听器都会被触发。同时，immediate: true 确保了侦听器在组件初始化完成后立即执行一次。

请注意，过度使用深度侦听可能会降低性能，因为它需要递归遍历对象的所有嵌套属性。因此，在不需要深度侦听的情况下，最好避免使用 deep 选项。