Vue中watch监听属性的一些应用总结
【1】vue2中watch的应用
① 简单监视
在 Vue 2 中，如果你不需要深度监视，即只需监听顶层属性的变化，可以使用简写形式来定义 watch。这种方式更加简洁，适用于大多数基本场景。
示例代码
假设你有一个 Vue 组件，其中包含一个名为 message 的字符串属性，你希望监听这个属性的变化。你可以这样写：
new Vue({el: '#app',data: {message: 'Hello Vue!'},watch: {// 简写形式，直接指定 handler 函数message(newVal, oldVal) {console.log('message changed from', oldVal, 'to', newVal);}}
});
解释
message(newVal, oldVal): 这个函数会在message属性发生变化时被调用。newVal参数是新的值，oldVal参数是旧的值。watch: 在watch对象中，键是你想监听的数据属性名，值是一个函数，该函数会在属性值发生变化时被调用。
更复杂的例子
假设你有一个对象，但你只想监听对象的某个特定属性，而不是整个对象的深度变化：
new Vue({el: '#app',data: {user: {name: 'Jack',age: 25}},watch: {// 监听 user.name 属性的变化'user.name'(newVal, oldVal) {console.log('user.name changed from', oldVal, 'to', newVal);}}
});
解释
'user.name'(newVal, oldVal): 这里使用字符串'user.name'作为键，Vue 会自动解析这个字符串并监听user对象的name属性的变化。watch: 同样，在watch对象中，键是你想监听的数据属性路径，值是一个函数，该函数会在属性值发生变化时被调用。
总结
简写形式的 watch 非常适合用于监听顶层属性或对象的特定属性的变化。如果你不需要深度监视，这种简写形式可以使代码更加简洁和易读。如果你有更多复杂的需求，比如需要立即执行监听器或处理更深层次的变化，可以使用完整的对象形式。
② 深度监视
在 Vue 2 中，watch 是一个非常有用的工具，它允许开发者监听 Vue 实例上的数据属性的变化，并在这些属性变化时执行特定的操作。当你需要监听的对象是一个复杂的数据结构（如对象或数组），并且你希望监听该对象内部属性的变化时，就需要使用深度监视（deep watching）。
如何使用深度监视？
要启用深度监视，你需要在 watch 配置中添加一个对象而不是简单的函数。这个对象应该包含两个属性：handler 和 deep。
- handler：这是一个函数，当被监听的数据发生变化时，这个函数会被调用。它接收两个参数：
newValue（新值）和oldValue（旧值）。 - deep：这是一个布尔值，默认为
false。将其设置为true可以开启深度监视，这意味着 Vue 将会递归地监视对象的所有属性，直到最深层。
示例代码
假设你有一个 Vue 组件，其中包含一个名为 user 的对象，你希望监听 user.name 和 user.age 的变化。你可以这样做：
new Vue({el: '#app',data: {user: {name: 'Jack',age: 25}},watch: {// 监听 user 对象的变化user: {handler(newVal, oldVal) {console.log('user changed', newVal, oldVal);},deep: true // 开启深度监听}}
});
注意事项
- 性能考虑：开启深度监听可能会导致性能下降，特别是当监听的对象非常大或嵌套层次很深时。因此，只有在确实需要监听对象内部属性的变化时才应使用深度监听。
- 立即执行：如果你想在初始化时也执行一次监听器，可以添加
immediate: true到监听配置中。
示例代码（带立即执行）
new Vue({el: '#app',data: {user: {name: 'Jack',age: 25}},watch: {user: {handler(newVal, oldVal) {console.log('user changed', newVal, oldVal);},deep: true,immediate: true // 初始化时立即执行一次handler}}
});