1. vue2 使用watch 监听和处理数据变化
在Vue 2中，watch是一种非常有用的特性，用于响应数据模型的变化。
当你需要在数据发生变化时执行异步或开销较大的操作时，watch就派上用场了。
1.1. 基本用法
在 Vue 实例的 watch 对象中定义一个方法，这个方法将作为响应式依赖更新的回调。例如：
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
watch: {
// 这里的 `value` 参数就是 `message` 的新值
message: function (newValue, oldValue) {
console.log('新的消息值为:', newValue);
console.log('旧的消息值为:', oldValue);
}
}
}); 在这个例子中，每当 message 发生改变时，就会触发 message 方法，并且会接收到新的值和旧的值作为参数。1.2. 处理复杂逻辑
如果你需要在监听器中执行更复杂的逻辑，可以使用对象形式来定义 watch 函数，这样你可以拥有更多的控制权：
new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
processedMessage: ''
},
watch: {
message: {
handler: function (newValue, oldValue) {
this.processedMessage = newValue.toUpperCase();
},
// 这里定义了只有当 `message` 的值真正发生改变时才会触发 handler
deep: true,
// 这里定义了在 `message` 初始赋值时就调用 handler
immediate: true
}
}
});1.3. 执行异步操作
你还可以在 watch 的回调函数中执行异步操作，比如发送 AJAX 请求等：
new Vue({
el: '#app',
data: {
userId: 1,
user: null
},
watch: {
userId: function (newId, oldId) {
if (newId) {
axios.get('/api/users/' + newId)
.then(response => {
this.user = response.data;
});
}
}
}
});在这个例子中，当 userId 发生变化时，watch 会触发一个 AJAX 请求来获取用户信息，并更新user数据。
1.4. 总结
•使用 watch 来响应数据变化。
•可以通过 newValue 和 oldValue 来获取新旧值。
•使用对象形式可以提供更多的配置选项（如 deep 和 immediate ）。
•可以在watch回调中执行复杂的逻辑或异步操作。
希望这些示例能够帮助你更好地理解 Vue 2 中 watch 的用法！
