watch侦听器

在 Vue.js 中，watch 侦听器用于观察和响应 Vue 实例上的数据变动。当你想在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。与计算属性不同，watch 侦听器允许你执行更复杂的逻辑，包括异步操作，并且只有当观察的数据实际发生变化时才会触发。

watch 的基本用法

你可以在 Vue 实例的 watch 选项中添加一个或多个侦听器。每个侦听器都是一个函数，或者是一个包含 handler 方法和其他选项的对象。

示例：

	new Vue({
	el: '#app',
	data: {
	message: 'Hello Vue!'
	},
	watch: {
	message: function (newVal, oldVal) {
	console.log('message changed from ' + oldVal + ' to ' + newVal);
	}
	}
	})

在这个例子中，我们创建了一个侦听器来观察 message 属性的变化。当 message 的值改变时，侦听器函数会被调用，并且会接收到新值和旧值作为参数。

深度侦听

如果你需要侦听一个对象的所有属性，而不是只侦听对象的引用变化，你可以使用 deep 选项。但是请注意，深度侦听会使你的应用变慢，因为它会递归地遍历对象的所有属性。

示例：

	new Vue({
	el: '#app',
	data: {
	obj: {
	a: 1,
	b: 2
	}
	},
	watch: {
	obj: {
	handler: function (newVal, oldVal) {
	console.log('obj changed');
	},
	deep: true
	}
	}
	})

在这个例子中，我们使用了深度侦听来观察 obj 对象的所有属性。但是，只有当 obj 对象的属性被改变时，侦听器才会被触发，而不是当 obj 的引用被改变时。

立即执行

默认情况下，watch 侦听器在数据变化之后立即执行。但是，如果你希望在侦听器创建时立即执行一次，你可以使用 immediate 选项。

示例：

	new Vue({
	el: '#app',
	data: {
	message: 'Hello Vue!'
	},
	watch: {
	message: {
	handler: function (newVal, oldVal) {
	console.log('message changed from ' + oldVal + ' to ' + newVal);
	},
	immediate: true
	}
	}
	})

在这个例子中，侦听器在创建时立即执行了一次，输出了初始的 message 值。之后，当 message 的值改变时，侦听器也会再次执行。