vue监听实现
Vue 监听实现方法
Vue 提供了多种方式来实现数据监听，以下是常见的几种方法：
watch 选项 在 Vue 实例中使用 watch 选项可以监听数据变化并执行相应操作。watch 选项可以监听 data 或 computed 属性的变化。
new Vue({
data: {
message: 'Hello'
},
watch: {
message(newVal, oldVal) {
console.log('Message changed from', oldVal, 'to', newVal)
}
}
})$watch 方法 通过 Vue 实例的 $watch 方法可以在代码中动态添加监听器。
const vm = new Vue({
data: {
count: 0
}
})
vm.$watch('count', function(newVal, oldVal) {
console.log('Count changed from', oldVal, 'to', newVal)
})immediate 和 deep 选项 watch 支持 immediate 和 deep 选项，immediate 让回调在监听开始时立即执行，deep 可以深度监听对象内部值的变化。
watch: {
obj: {
handler(newVal, oldVal) {
console.log('obj changed')
},
deep: true,
immediate: true
}
}计算属性 computed 对于需要基于其他数据计算得出的值，使用 computed 属性更为合适。计算属性会缓存结果，只有依赖项变化时才会重新计算。
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
}自定义监听逻辑 在需要更复杂的监听逻辑时，可以使用 Vue 的响应式系统 API 如 Vue.set、Vue.delete 或 this.$set 来确保响应式更新。
this.$set(this.someObject, 'newKey', 'newValue')生命周期钩子中的监听 在 created 或 mounted 等生命周期钩子中添加监听逻辑，并在 beforeDestroy 中移除监听以避免内存泄漏。
created() {
this.$watch('someData', this.someHandler)
},
beforeDestroy() {
// 移除监听器
}第三方库辅助监听 对于复杂场景，可以使用 Vuex 状态管理或第三方库如 vue-observe-visibility 来实现更专业的监听需求。
import VueObserveVisibility from 'vue-observe-visibility'
Vue.use(VueObserveVisibility)
