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)
}