当前位置：首页 > VUE

vue.js watch实现

2026-01-21 03:38:09VUE

使用 `watch` 监听数据变化

在 Vue.js 中，watch 用于监听响应式数据的变化，并在数据变化时执行回调函数。

基本语法

export default {
  data() {
    return {
      message: 'Hello Vue!',
      user: {
        name: 'John',
        age: 25
      }
    }
  },
  watch: {
    // 监听简单数据
    message(newVal, oldVal) {
      console.log('message changed:', newVal, oldVal);
    },
    // 监听对象属性
    'user.name'(newVal, oldVal) {
      console.log('user.name changed:', newVal, oldVal);
    }
  }
}

深度监听对象

默认情况下，watch 不会监听对象内部属性的变化。如果需要深度监听，可以使用 deep: true。

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

立即执行回调

immediate: true 可以让 watch 在组件初始化时立即执行一次回调。

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

使用 `$watch` 动态监听

可以在 mounted 或方法中动态添加监听器。

export default {
  data() {
    return {
      count: 0
    }
  },
  mounted() {
    this.$watch('count', (newVal, oldVal) => {
      console.log('count changed:', newVal, oldVal);
    });
  }
}

使用 `watch` 替代 `computed`

watch 适用于需要在数据变化时执行异步或复杂逻辑的场景，而 computed 更适合计算派生数据。

watch: {
  searchQuery(newVal) {
    this.fetchResults(newVal);
  }
},
methods: {
  fetchResults(query) {
    // 模拟 API 请求
    setTimeout(() => {
      console.log('Fetching results for:', query);
    }, 300);
  }
}