vue watch实现

使用 watch 监听数据变化

在 Vue 中，watch 用于监听数据的变化并执行相应的回调函数。通过 watch 可以监听响应式数据的变化，包括 data、computed 或 props 中的数据。

export default {
  data() {
    return {
      message: 'Hello Vue',
      count: 0
    }
  },
  watch: {
    // 监听 message 的变化
    message(newVal, oldVal) {
      console.log('message changed:', oldVal, '->', newVal)
    },
    // 监听 count 的变化
    count(newVal, oldVal) {
      console.log('count changed:', oldVal, '->', newVal)
    }
  }
}

监听对象或数组的深层变化

默认情况下，watch 是浅层的，不会监听对象或数组内部属性的变化。如果需要监听深层变化，可以设置 deep: true。

export default {
  data() {
    return {
      user: {
        name: 'Alice',
        age: 25
      }
    }
  },
  watch: {
    user: {
      handler(newVal, oldVal) {
        console.log('user changed:', oldVal, '->', newVal)
      },
      deep: true // 监听深层变化
    }
  }
}

立即触发监听回调

如果需要监听器在初始化时立即执行一次回调，可以设置 immediate: true。

export default {
  data() {
    return {
      message: 'Hello Vue'
    }
  },
  watch: {
    message: {
      handler(newVal, oldVal) {
        console.log('message changed:', oldVal, '->', newVal)
      },
      immediate: true // 初始化时立即执行
    }
  }
}

监听动态属性

如果需要监听动态变化的属性（如 props 中的动态值），可以使用函数返回监听的目标。

export default {
  props: ['userId'],
  watch: {
    // 监听 userId 的变化
    userId(newVal, oldVal) {
      console.log('userId changed:', oldVal, '->', newVal)
    }
  }
}

使用 $watch 动态监听

除了在 watch 选项中定义监听器，还可以通过 this.$watch 动态添加监听器，并可以手动取消监听。

export default {
  data() {
    return {
      message: 'Hello Vue'
    }
  },
  created() {
    // 动态添加监听器
    const unwatch = this.$watch('message', (newVal, oldVal) => {
      console.log('message changed:', oldVal, '->', newVal)
    })

    // 取消监听
    setTimeout(() => {
      unwatch()
    }, 5000)
  }
}

监听计算属性

watch 也可以监听 computed 计算属性的变化。

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`
    }
  },
  watch: {
    fullName(newVal, oldVal) {
      console.log('fullName changed:', oldVal, '->', newVal)
    }
  }
}

监听多个数据源

如果需要同时监听多个数据源的变化，可以使用数组形式传入多个监听目标。

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  watch: {
    // 监听 firstName 和 lastName 的变化
    '[firstName, lastName]'(newVals, oldVals) {
      console.log('firstName or lastName changed:', oldVals, '->', newVals)
    }
  }
}

结合 watch 和 methods

可以在 watch 中调用 methods 中的方法，实现更复杂的逻辑。

export default {
  data() {
    return {
      searchQuery: ''
    }
  },
  methods: {
    fetchData(query) {
      console.log('Fetching data for:', query)
    }
  },
  watch: {
    searchQuery(newVal) {
      this.fetchData(newVal)
    }
  }
}

使用 watchEffect（Vue 3）

在 Vue 3 中，可以使用 watchEffect 自动追踪依赖并执行回调。

import { watchEffect, ref } from 'vue'

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

    watchEffect(() => {
      console.log('count changed:', count.value)
    })

    return { count }
  }
}

以上方法涵盖了 Vue 中 watch 的基本和高级用法，适用于不同场景下的数据监听需求。