vue.js watch实现

监听数据变化

在Vue.js中，watch选项用于监听数据变化并执行相应操作。基本语法是在组件选项中定义一个watch对象，键为要监听的属性名，值为回调函数或配置对象。

watch: {
  propertyName(newVal, oldVal) {
    // 响应变化
  }
}

监听对象属性

需要监听对象内部属性时，可以使用深度监听（deep: true）。注意对于嵌套对象，直接修改子属性可能不会触发监听，建议使用Vue.set或重新赋值整个对象。

watch: {
  obj: {
    handler(newVal) {
      console.log('对象变化', newVal)
    },
    deep: true,
    immediate: true // 立即执行一次
  }
}

监听数组变化

默认情况下，Vue能检测到数组的变异方法（如push/pop等）。如需监听特定索引变化或数组长度变化，仍需使用deep: true。

watch: {
  arr: {
    handler(newArr) {
      console.log('数组变化', newArr)
    },
    deep: true
  }
}

计算属性 vs 监听器

计算属性（computed）适合派生状态，而watch更适合执行异步操作或较大开销的响应。当需要基于多个数据源进行计算时优先使用计算属性。

动态监听

Vue 2.x可以通过vm.$watchAPI动态创建监听器，返回取消监听函数。这在需要条件监听时特别有用。

created() {
  this.unwatch = this.$watch('dynamicProp', (val) => {
    console.log('动态监听:', val)
  })
},
beforeDestroy() {
  this.unwatch() // 取消监听
}

监听路由变化

在Vue Router环境中，可以监听$route对象的变化来处理路由参数变动。

watch: {
  '$route'(to, from) {
    if (to.params.id !== from.params.id) {
      this.fetchData()
    }
  }
}

性能优化技巧

避免在监听器中执行复杂同步操作，对于频繁变化的数据考虑使用防抖（debounce）或节流（throttle）。Vue 3.x的Composition API提供了更灵活的watch和watchEffect实现方式。