vue watch实现
监听数据变化的基本用法
在 Vue 中，watch 用于监听数据变化并执行相应操作。通过定义一个 watch 对象，可以指定要监听的属性及其处理函数。
export default {
data() {
return {
message: 'Hello'
}
},
watch: {
message(newVal, oldVal) {
console.log('Message changed from', oldVal, 'to', newVal)
}
}
}深度监听对象或数组
当需要监听对象内部属性或数组元素变化时，使用 deep 选项。这会使监听器递归观察所有嵌套值的变化。
watch: {
someObject: {
handler(newVal, oldVal) {
// 处理变化
},
deep: true
}
}立即触发监听回调
使用 immediate 选项可以在监听开始时立即执行一次回调函数，而不是等待数据首次变化。
watch: {
someProp: {
handler(newVal) {
// 初始调用
},
immediate: true
}
}监听计算属性
可以直接监听计算属性的变化，就像监听普通数据属性一样。
computed: {
computedMsg() {
return this.message + ' World'
}
},
watch: {
computedMsg(newVal) {
console.log('Computed message changed:', newVal)
}
}使用 $watch API
除了选项式 API，还可以在组件实例上使用 $watch 方法动态添加监听器。这种方式返回一个取消监听的函数。
export default {
created() {
this.unwatch = this.$watch('message', (newVal, oldVal) => {
console.log('Message changed:', newVal)
})
},
beforeDestroy() {
this.unwatch() // 取消监听
}
}监听路由变化
在 Vue Router 应用中，可以监听 $route 对象的变化来响应路由切换。
watch: {
'$route'(to, from) {
// 处理路由变化
console.log('Navigated from', from.path, 'to', to.path)
}
}监听多个数据源
通过将多个属性名放在数组中，可以同时监听多个数据源的变化。
watch: {
['prop1', 'prop2'](newValues, oldValues) {
const [newProp1, newProp2] = newValues
const [oldProp1, oldProp2] = oldValues
// 处理变化
}
}性能优化技巧
对于频繁变化的数据，可以使用 debounce 或 throttle 限制回调执行频率。这需要借助 Lodash 等工具库实现。
import { debounce } from 'lodash'
watch: {
searchQuery: debounce(function(newVal) {
this.fetchResults(newVal)
}, 500)
}
