vue watch实现

在 Vue 中实现 watch 监听数据变化

Vue 的 watch 选项用于监听数据变化并执行相应的回调函数。以下是几种常见的实现方式：

基础用法

export default {
  data() {
    return {
      message: 'Hello'
    }
  },
  watch: {
    message(newVal, oldVal) {
      console.log('message changed:', oldVal, '->', newVal)
    }
  }
}

深度监听对象

当需要监听对象内部属性变化时，使用 deep 选项：

watch: {
  user: {
    handler(newVal, oldVal) {
      console.log('user changed')
    },
    deep: true
  }
}

立即触发回调

如果需要立即执行一次监听回调，使用 immediate 选项：

watch: {
  value: {
    handler(newVal, oldVal) {
      console.log('value changed')
    },
    immediate: true
  }
}

监听特定路径

使用字符串路径监听嵌套属性：

watch: {
  'user.name'(newVal, oldVal) {
    console.log('user name changed')
  }
}

使用 $watch API

在组件实例中动态添加监听器：

created() {
  this.$watch(
    'count',
    (newVal, oldVal) => {
      console.log('count changed')
    },
    { immediate: true }
  )
}

组合式 API 中的 watch

在 setup() 中使用 watch：

import { ref, watch } from 'vue'

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

    watch(count, (newVal, oldVal) => {
      console.log('count changed')
    })

    return { count }
  }
}

监听多个数据源

监听多个响应式数据：

watch(
  [ref1, ref2],
  ([newVal1, newVal2], [oldVal1, oldVal2]) => {
    console.log('multiple values changed')
  }
)

停止监听

通过调用 watch 返回的函数停止监听：

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