前端vue监听 -watch

前言

在 Vue.js 里，watch 选项可用于响应式地监听数据的变化，当被监听的数据发生改变时，就会触发相应的回调函数来执行特定操作。下面从基本用法、高级用法以及注意事项等方面详细讲解 watch。

基本用法

监听简单数据属性

监听一个简单的数据属性时，在 watch 对象中使用与数据属性同名的键，对应的值为一个回调函数。该 回调函数接收两个参数 ：新值和旧值。

<template><div><input v-model="message" placeholder="请输入内容"><p>当前输入内容：{{ message }}</p></div>
</template><script>
export default {data() {return {message: ''};},watch: {message(newValue, oldValue) {console.log(`新值: ${newValue}, 旧值: ${oldValue}`);}}
};
</script>

在这个例子中，每当 message 的值改变时，回调函数就会被触发，同时会在控制台打印出新值和旧值。

监听对象属性

如果要监听对象的某个属性，可使用字符串形式的路径来指定要监听的属性。

<template><div><input v-model="user.name" placeholder="请输入姓名"><p>当前姓名：{{ user.name }}</p></div>
</template><script>
export default {data() {return {user: {name: ''}};},watch: {'user.name'(newValue, oldValue) {console.log(`新姓名: ${newValue}, 旧姓名: ${oldValue}`);}}
};
</script>

这里监听了 user 对象的 name 属性，当 name 改变时，会在控制台输出相应信息。

高级用法

深度监听对象

若要监听对象内部所有属性的变化，需使用深度监听，通过设置 deep: true 来实现。

<template><div><input v-model="user.name" placeholder="请输入姓名"><input v-model="user.age" placeholder="请输入年龄"><p>当前姓名：{{ user.name }}, 当前年龄：{{ user.age }}</p></div>
</template><script>
export default {data() {return {user: {name: '',age: ''}};},watch: {user: {handler(newValue, oldValue) {console.log('用户信息已更新');},deep: true}}
};
</script>

只要 user 对象的任何属性发生变化，handler 函数就会被触发。不过要注意，深度监听会遍历对象的所有属性，可能会对性能产生一定影响。

即时触发监听

有时希望 在组件挂载时就立即触发一次监听函数，可使用 immediate: true 选项。

<template><div><input v-model="message" placeholder="请输入内容"><p>当前输入内容：{{ message }}</p></div>
</template><script>
export default {data() {return {message: ''};},watch: {message: {handler(newValue, oldValue) {console.log(`新值: ${newValue}, 旧值: ${oldValue}`);},immediate: true}}
};
</script>

在这个例子中，组件挂载时就会执行一次 handler 函数。

监听计算属性

除了监听数据属性，还能监听计算属性。当计算属性依赖的数据发生变化，导致计算属性的值改变时，监听函数会被触发。

<template><div><input v-model="firstName" placeholder="请输入名字"><input v-model="lastName" placeholder="请输入姓氏"><p>全名：{{ fullName }}</p></div>
</template><script>
export default {data() {return {firstName: '',lastName: ''};},computed: {fullName() {return `${this.firstName} ${this.lastName}`;}},watch: {fullName(newValue, oldValue) {console.log(`新全名: ${newValue}, 旧全名: ${oldValue}`);}}
};
</script>

当 firstName 或者 lastName 发生变化，fullName 也会改变，此时监听函数会被触发。

注意事项

1. 性能影响：深度监听会递归遍历对象的所有属性，当对象结构复杂时，可能会对性能造成较大影响。所以在使用深度监听时，要谨慎考虑。
2. 旧值问题：在深度监听对象时，oldValue 和 newValue 可能指向同一个对象，因为它们都是对象的引用。如果需要对比对象的前后状态，可以在 handler 函数中进行深拷贝。
3. 销毁监听：在组件销毁时，Vue 会自动销毁 watch 监听。但如果使用了 $watch 方法手动创建监听，需要在组件销毁前手动调用 unwatch 函数来销毁监听，避免内存泄漏。

综上所述，watch 是 Vue.js 中一个非常实用的特性，合理使用它可以方便地处理数据变化时的逻辑。