管理数据必备；侦听器watch用法详解，vue2与vue3中watch的变化与差异

watermelo37

发布于 2025-01-22 21:45:23

32100

代码可运行

文章被收录于专栏：前端专精前端专精

运行总次数：0

代码可运行

一、侦听器（watch）是什么？

侦听器是一个在 Vue.js 框架中用于观察和响应数据变化的机制。侦听器允许开发者指定一个函数，这个函数会在特定数据变化时自动执行。Vue.js 使用侦听器来实现数据双向绑定和响应式更新。

说简单点，侦听器常用来监听数据的变化，并在数据变化时捕获数据变化前后的值，并执行我们声明的回调函数。

就像现实中的监听设备一样，发现情况有变立马行动，只不过Vue中的侦听器只针对数据。

二、Vue2中的watch（Options API）

在Vue2中，watch 是一个选项，你可以在组件中定义它来观察数据的变化。常用的包括函数式写法和对象式写法，以我个人的习惯，如果监听的需求比较简单，也不会涉及到日后的拓展问题，就可以直接使用函数式，这样写起来简便；如果监听比较复杂，比如监听有多层的对象，或者需要用到immediate属性，又或者要方便日后拓展和维护，就用对象式，这样更清晰，更方便拓展。还有就是大型项目建议还是用对象式，统一用法比较好。

2.1、函数式写法

此时每个被侦听的属性被当做一个“函数”，这个函数就是被侦听的属性变化后所执行的回调函数，该函数接受两个参数，第一个是变化后的新值，第二个是变化前的旧值。

export default {
  data() {
    return {
      watchedProperty: ''
    };
  },
  watch: {
    // 当 watchedProperty 发生变化时，这个函数将被调用
    watchedProperty(newVal, oldVal) {
      // 在这里执行当 watchedProperty 改变时要执行的代码
      console.log(`从 ${oldVal} 变为 ${newVal}`);
    }
  }
};

2.2、对象式写法

①对象式基础写法

此时每个被侦听的属性被当做一个“对象”，这个对象名就是被侦听的属性名，该对象中有一个函数和若干个属性。基础写法如下：

export default {
  data() {
    return {
      dataProperty: ''
    };
  },
  watch: {
    // 观察 dataProperty 的变化
    dataProperty: {
      // 当 dataProperty 发生变化时，这个函数将被调用
      handler(newVal, oldVal) {
        console.log(`数据从 ${oldVal} 变更为 ${newVal}`);
      },
      // 深度观察
      deep: true,
      // 立即执行观察者函数
      immediate: true
    }
  }
};

②回调函数handler

对象式写法中有个函数名为handler，名称不可自定义，该函数为被监听属性变化后所执行的回调函数，该函数接受两个参数，第一个是变化后的新值，第二个是变化前的旧值。

③deep属性

deep是常用的属性：缺省值为false，只监听表层变化，设置为true后可监听深层的数值，deep选项允许你观察对象内部属性的变化。如果没有设置deep，当对象内部的属性变化时，handler函数不会被触发。见下方例子：

export default {
  data() {
    return {
      userInfo: {
        name: 'John Doe',
        age: 30
      }
    };
  },
  watch: {
    userInfo: {
      handler(newVal, oldVal) {
        console.log(`用户信息从 ${JSON.stringify(oldVal)} 变更为 ${JSON.stringify(newVal)}`);
      },
      deep: true
    }
  }
};

在这个例子中，如果userInfo对象的name或age属性发生变化，handler函数将被调用，因为它使用了deep选项，但如果没有设置deep，那么只有在userInfo引用的内容发生变化时才会调用handler函数，比如将另外一个对象直接浅拷贝给userInfo。

④immediate属性

immediate选项允许你在开始观察时立即执行handler函数。这一般是用在需要组件初始化时就立即执行handler函数的情况下。下面是一个例子：

export default {
  data() {
    return {
      initialData: 'Initial Value'
    };
  },
  watch: {
    initialData: {
      handler(newVal, oldVal) {
        console.log(`初始数据从 ${oldVal} 变更为 ${newVal}`);
      },
      immediate: true
    }
  },
  created() {
    // 组件创建时，我们改变initialData的值
    this.initialData = 'Changed Value';
  }
};

三、Vue3中的watch

3.1、向下兼容（Vue2）的Options API

在Vue3中，使用Options API时，watch的用法与Vue2相同。

export default {

  data() {
    return {
      watchedProperty: ''
    };
  },
  watch: {
    watchedProperty(newVal, oldVal) {
      console.log(`从 ${oldVal} 变为 ${newVal}`);
    }
  }
};

3.2、使用Composition API

3.2.1、基础语法

在Vue3的Composition API中，watch 以函数的形式存在，可以更细粒度地控制侦听器。watch函数接收两个参数：

被监听的属性：你想要观察的响应式数据源，可以是响应式引用 ref、计算属性 computed，或者返回响应式值的函数。
回调函数：当被监听的属性发生变化时调用的函数，它接收新值和旧值作为参数。

使用Composition API的watch提供了更大的灵活性，例如，你可以观察更复杂的响应式状态，或者使用watchEffect来自动追踪依赖并执行副作用。

3.2.2、基础用法示例

在Vue 3的Composition API中，基础用法示例如下：

import { watch, ref } from 'vue';

export default {
  setup() {
    const watchedProperty = ref('');

    // 使用 watch 函数观察 watchedProperty 的变化
    watch(watchedProperty, (newVal, oldVal) => {
      console.log(`从 ${oldVal} 变为 ${newVal}`);
    });

    // 也可以观察其他响应式引用或计算属性
    // watch(() => someComputedProperty, (newVal, oldVal) => { ... });

    // 返回响应式状态供模板或其他Composition API使用
    return {
      watchedProperty
    };
  }
};

3.2.3、Vue3中的对象式写法

写法核心思想和Vue2差不多，只不过变成了箭头函数，随便给个例子就能看懂：

import { ref, watch } from 'vue';

// 创建响应式引用
const state = ref({
  name: 'John Doe',
  age: 30
});

// 使用 watch 函数，同时设置 deep 和 immediate 选项
watch(
  () => state.value, // 观察的响应式源
  (newVal, oldVal) => {
    console.log(`State changed from ${JSON.stringify(oldVal)} to ${JSON.stringify(newVal)}`);
  },
  {
    deep: true,    // 深度观察，观察对象内部属性的变化
    immediate: true // 立即执行观察者函数
  }
);

四、Vue3中的watchEffect

Vue3提倡使用 watchEffect 自动追踪依赖并执行副作用，而不是直接用watch来进行简单的副作用的侦听。副作用通常是指那些与组件渲染无关的操作，如 API 调用、手动更改 DOM 等。watchEffect 不需要显式指定要观察的响应式状态，它会自动追踪其内部使用的响应式引用和状态。这减少了样板代码，当开发者只是想要观察属性的变化时，不用写那么多重复的代码。

import { ref, watch, watchEffect } from 'vue';

export default {
  setup() {
    // 创建响应式状态
    const count = ref(0);

    // 使用 watchEffect 自动追踪 count 并执行副作用
    watchEffect(() => {
      console.log(`count is now ${count.value}`);
      // 当 count 发生变化时，这里的代码会被自动执行
    });

    // 使用 watch 观察 count 的变化
    watch(count, (newValue, oldValue) => {
      console.log(`count changed from ${oldValue} to ${newValue}`);
      // 当 count 发生变化时，这里的回调函数会被调用
    });

    // 模拟用户交互，改变 count 的值
    function increment() {
      count.value++;
    }

    return {
      count,
      increment
    };
  }
};

说白了，只要将响应式数据写到watchEffect里面，就能自动侦听变化，并执行一些副作用，这样大大减少了开发时的代码负担。