vue的watch如何实现

vue的watch实现方法

在Vue中，watch用于监听数据变化并执行相应操作。以下是几种常见实现方式：

基础监听方式

通过选项式API的watch属性监听数据变化：

export default {
  data() {
    return {
      message: 'Hello'
    }
  },
  watch: {
    message(newVal, oldVal) {
      console.log(`值从${oldVal}变为${newVal}`)
    }
  }
}

立即执行监听

添加immediate选项使回调在监听开始时立即执行：

watch: {
  message: {
    handler(newVal, oldVal) {
      // 处理逻辑
    },
    immediate: true
  }
}

深度监听对象

使用deep选项监听对象内部值变化：

watch: {
  user: {
    handler(newVal) {
      // 对象任何属性变化都会触发
    },
    deep: true
  }
}

计算属性监听

结合计算属性实现特定监听：

computed: {
  userName() {
    return this.user.name
  }
},
watch: {
  userName(newVal) {
    // 仅监听name变化
  }
}

组合式API监听

在setup()中使用watch函数：

import { ref, watch } from 'vue'

export default {
  setup() {
    const count = ref(0)

    watch(count, (newVal, oldVal) => {
      console.log(`计数变化: ${oldVal} -> ${newVal}`)
    })

    return { count }
  }
}

监听多个数据源

使用数组同时监听多个响应式数据：

watch([ref1, ref2], ([newVal1, newVal2], [oldVal1, oldVal2]) => {
  // 处理多个值变化
})

停止监听

通过watch函数返回的停止函数来取消监听：

const stop = watch(source, callback)
// 需要时调用
stop()

监听路由变化

监听路由参数变化：

watch: {
  '$route.params.id'(newId) {
    // 处理路由参数变化
  }
}

这些方法覆盖了Vue中watch的主要使用场景，可以根据具体需求选择合适的方式。对于复杂场景，可能需要结合计算属性和方法调用实现更精细的控制。