vue监听实现
Vue 监听实现方法
使用 watch 选项
在 Vue 组件中，可以通过 watch 选项监听数据变化。当被监听的数据发生变化时，指定的回调函数会被触发。
export default {
data() {
return {
message: 'Hello'
}
},
watch: {
message(newVal, oldVal) {
console.log('Message changed from', oldVal, 'to', newVal)
}
}
}立即执行的监听器
如果需要监听器在创建时立即执行一次，可以设置 immediate 选项为 true。
watch: {
message: {
handler(newVal, oldVal) {
console.log('Message changed')
},
immediate: true
}
}深度监听对象
默认情况下，watch 只监听对象引用的变化。如果需要监听对象内部属性的变化，可以设置 deep 选项为 true。
watch: {
user: {
handler(newVal) {
console.log('User changed')
},
deep: true
}
}使用 $watch 方法
除了在组件选项中定义监听器，还可以在组件实例上调用 $watch 方法来动态添加监听器。
export default {
created() {
this.$watch('message', (newVal, oldVal) => {
console.log('Message changed')
})
}
}计算属性监听
对于需要基于其他数据计算的值，可以使用计算属性。计算属性会自动追踪依赖，并在依赖变化时重新计算。
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe'
}
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName
}
}
}监听路由变化
在 Vue Router 中，可以通过 watch 来监听路由变化。
watch: {
'$route'(to, from) {
console.log('Route changed from', from.path, 'to', to.path)
}
}使用 .sync 修饰符
.sync 修饰符可以实现父子组件之间的双向绑定，本质上是监听 update: 事件。
// 父组件
<ChildComponent :title.sync="pageTitle" />
// 子组件
this.$emit('update:title', newTitle)监听多个数据源
如果需要监听多个数据源的变化，可以使用数组形式的监听键。
watch: {
['data1', 'data2'](newValues, oldValues) {
console.log('Data changed', newValues, oldValues)
}
}取消监听
通过 $watch 方法返回的函数可以取消监听。
const unwatch = this.$watch('message', handler)
unwatch() // 取消监听以上方法涵盖了 Vue 中实现监听的常见场景，可以根据具体需求选择合适的方式。
