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

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

二、Vue2中的watch（Options API）

2.1、函数式写法

2.2、对象式写法

①对象式基础写法

②回调函数handler

③deep属性

④immediate属性

三、Vue3中的watch

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

3.2、使用Composition API

3.2.1、基础语法

3.2.2、基础用法示例

3.2.3、Vue3中的对象式写法

四、Vue3中的watchEffect

五、总结

一、侦听器（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里面，就能自动侦听变化，并执行一些副作用，这样大大减少了开发时的代码负担。