vue实现watch

监听数据变化

在Vue中，watch用于监听响应式数据的变化并执行回调函数。基本语法如下：

watch: {
  propertyName(newValue, oldValue) {
    // 处理逻辑
  }
}

监听对象属性

如果需要监听对象的某个属性变化，可以使用点语法或字符串形式：

watch: {
  'obj.property'(newVal) {
    console.log('属性变化:', newVal)
  }
}

深度监听对象

当需要监听对象内部所有嵌套属性变化时，启用deep选项：

watch: {
  obj: {
    handler(newVal) {
      // 处理逻辑
    },
    deep: true
  }
}

立即触发回调

设置immediate: true会在组件创建时立即执行一次回调：

watch: {
  value: {
    handler(newVal) {
      // 初始化执行
    },
    immediate: true
  }
}

监听数组变化

Vue默认无法检测数组元素赋值变化，需要特殊处理：

watch: {
  arr: {
    handler(newVal) {
      // 处理数组变化
    },
    deep: true
  }
}

组合式API写法

在Vue3的setup语法中，使用watch函数：

import { watch, ref } from 'vue'

const count = ref(0)
watch(count, (newVal, oldVal) => {
  console.log('count变化:', newVal)
})

监听多个数据源

可以同时监听多个响应式数据：

watch([ref1, ref2], ([new1, new2], [old1, old2]) => {
  // 处理多个值变化
})

停止监听

组合式API中watch返回停止函数：

const stop = watch(data, callback)
// 需要时调用停止
stop()

性能优化建议

对于复杂计算或频繁变化的数据，考虑使用watchEffect或计算属性替代，避免不必要的深度监听消耗性能。