【Vue】Vue3.0 （十二）、watchEffect 和watch的区别及使用

上篇文章： 【Vue】Vue3.0 （十二）、watch对ref定义的基本类型、对象类型；reactive定义的对象类型的监视使用

🏡作者主页：点击！

🤖Vue专栏：点击！

⏰️创作时间：2024年10月17日21点56分

【watchEffect】

watchEffect 和 watch 都是 Vue.js
中用于响应式数据变化的特性，但它们之间存在一些区别，主要体现在以下几个方面：

一、使用方式

• watch：
  • 是一个选项 API，通常在组件的选项中使用。
  • 需要显式地指定要监听的数据和回调函数。例如：

watch('somedata', (newval, oldval) => {// 做一些事情
});

- 也可以监听多个数据的变化，多个数据的时候需要区分是监听对象还是基本的数据类型，在写法上有些区别，具体可见我上一篇文章：[【Vue】Vue3.0 （十二）、watch对ref定义的基本类型、对象类型；reactive定义的对象类型的监视使用](https://blog.csdn.net/qq_39666711/article/details/142974884?spm=1001.2014.3001.5502)例如：

watch(['data1', 'data2'], (newValue,oldValue) => {// 做一些事情// 比如输出一些内容：console.log('数据中data1或者data2变化了',newValue,oldValue)
});

• watchEffect：
  • 是一个函数 API，在组件的 setup 函数或生命周期函数中使用。
  • 不需要显式地指定要监听的数据，它会自动追踪函数内部使用的响应式数据。例如：

watcheffect(() => {// 依赖于响应式数据的操作
});

二、初始化执行时机

• watch：
  • 默认是懒侦听，即组件初始化时不执行，只有在被监听的数据发生变化时才会执行回调函数。
  • 如果设置了 immediate: true，则 watch 在页面首次加载时就会执行。
• watchEffect：
  • 在组件初始化时会立即执行一次，用来收集依赖。

三、监听数据

• watch：
  • 更加明确是应该由哪个状态触发侦听器重新执行。
  • 可以监听一个具体的数据变化，也可以监听多个数据的变化。
  • 当监听一个对象时，如果对象的属性发生变化，需要使用深度监听（deep: true）才能捕获到变化。
• watchEffect：
  • 会自动追踪函数内部使用的响应式数据，只要这些数据发生变化，函数就会重新执行。
  • 不能直接监听整个对象的变化，需要追踪到对象的属性，在对象属性值改变后才会触发。

四、回调函数参数

• watch：
  • 回调函数可以获取到更改前后的值。
  • 例如：

watch('somedata', (newval, oldval) => {console.log('旧值：', oldval);console.log('新值：', newval);
});

• watchEffect：
  • 无法获取到更改前的值，只能获取到变化后的值。

五、适用场景

• watch：
  • 适用于需要细粒度控制响应式数据变化的场景，比如需要手动停止监听或访问数据变化前后的值。
  • 例如，在一个表单组件中，监听表单字段的变化，以便在用户输入时进行实时验证。
• watchEffect：
  • 更适合用于自动追踪响应式数据并触发副作用的场景，如执行异步操作或更新 UI。
  • 例如，在一个数据可视化组件中，根据数据的变化自动更新图表。

六、示例

watch 示例一：

import { ref, watch } from 'vue';export default {setup() {const count = ref(0);const name = ref('John');// 监听单个数据watch(count, (newCount, oldCount) => {console.log('count 的值从', oldCount, '变为了', newCount);});// 监听多个数据watch([count, name], ([newCount, newName], [oldCount, oldName]) => {console.log('count 的值从', oldCount, '变为了', newCount);console.log('name 的值从', oldName, '变为了', newName);});return {count,name};}
};

• watchEffect 示例：

import { ref, watchEffect } from 'vue';export default {setup() {const count = ref(0);const name = ref('John');watchEffect(() => {console.log('count 的值为：', count.value);console.log('name 的值为：', name.value);});return {count,name};}
};

再来个栗子趴~

<template><div class="person"><h2>情况4：watch监控ref定义的对象类型数据</h2><h3>姓名：{{person.name}} </h3><h3>年龄：{{person.age}} </h3><h3>汽车：{{person.car.c1}} /{{person.car.c2}} </h3><button @click="changeName">修改姓名</button><button @click="changeAge">修改年龄</button><button @click="changeC1">修改c1</button><button @click="changeC2">修改c2</button><button @click="changeCar">修改Car</button></div>
</template><script lang="ts" setup name="Person">import { reactive, ref, computed, watch } from 'vue'
//数据
let person=reactive({name:'张三',age:18,car:{c1:'宝马',c2:'奔驰'}
})function changeName(){person.name+='~';
}
function changeAge(){person.age+=1;
}
function changeC1(){person.car.c1='大众1'
}
function changeC2(){person.car.c2='大众2'}
function changeCar(){person.car={c1:'雅迪',c2:'艾玛'}
}//情况4、watch监控reactive定义的对象类型数据中的某个属性，且该属性是一个基本类型的数据，则该属性需要写成一个有返回值的函数
// watch(()=>{return person.name},(newVal,oldVal)=>{
//     console.log('person.name变化了',newVal,oldVal);
// })// watch([()=>person.name,person.car],(newValue,oldValue)=>{
//     console.log('person.car变化了',newValue,oldValue)
//   },{deep:true})watch([()=>person.name,()=>person.age],(newValue,oldValue)=>{console.log('person.car变化了',newValue,oldValue)},{deep:true})
</script><style>
.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}li {font: 1em sans-serif;
}
</style>

验证结果：
点击修改 name和名字都会引起watch的监听；

总结：

1. 都能监听响应式数据的变化，不同的是监听数据变化的方式不同

2. watch：要明确指出监视的数据

3. watchEffect：不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）。

watch 和 watchEffect
都是非常有用的响应式数据监听工具，在实际使用中，需要根据具体的需求和场景来选择合适的方法。如果需要对数据变化进行更精细的控制，或者需要获取数据变化前后的值，那么
watch 可能更适合；如果只是需要在数据变化时自动执行一些副作用，那么 watchEffect 可能更简洁方便。