vue watch用法

Vue2023-12-1821 人已阅来源:网络

在 Vue.js 中,watch 选项用于监听数据的变化,并在数据变化时执行相应的操作。watch 选项可以是一个对象,也可以是一个函数。下面分别介绍两种用法:

对象形式的 watch 选项:

export default {
  data() {
    return {
      message: 'Hello, Vue!',
    };
  },
  watch: {
    message(newVal, oldVal) {
      // 在 message 发生变化时执行的操作
      console.log('message 发生变化了:', newVal, oldVal);
    },
  },
};

在上面的例子中,我们在 watch 选项中定义了一个 message 属性,并指定了一个回调函数,当 message 发生变化时,回调函数会被执行。回调函数接受两个参数,分别是新值和旧值。

函数形式的 watch 选项:

export default {
  data() {
    return {
      message: 'Hello, Vue!',
    };
  },
  watch: {
    'message': {
      handler(newVal, oldVal) {
        // 在 message 发生变化时执行的操作
        console.log('message 发生变化了:', newVal, oldVal);
      },
      deep: true, // 深度监听对象内部值的变化
      immediate: true, // 立即执行一次回调
    },
  },
};

在函数形式的 watch 选项中,我们可以指定一个 handler 函数来处理数据变化,并且可以通过 deep 和 immediate 选项来配置监听行为。

无论是对象形式还是函数形式,watch 选项都可以用来监听数据的变化,并执行相应的操作。这在需要根据数据变化来进行一些逻辑处理的情况下非常有用。