上篇文章： 【Vue】Vue3.0 （十二）、watch对ref定义的基本类型、对象类型；reactive定义的对象类型的监视使用
🏡作者主页：点击！
🤖Vue专栏：点击！
⏰️创作时间：2024年10月17日21点56分
文章目录
- 【watchEffect】
- 一、使用方式
- 二、初始化执行时机
- 三、监听数据
- 四、回调函数参数
- 五、适用场景
- 六、示例
- watch 示例一：
- 再来个栗子趴~
- 总结：
【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的监听；
总结：
-
都能监听响应式数据的变化，不同的是监听数据变化的方式不同
-
watch：要明确指出监视的数据 -
watchEffect：不用明确指出监视的数据（函数中用到哪些属性，那就监视哪些属性）。
watch和watchEffect
都是非常有用的响应式数据监听工具，在实际使用中，需要根据具体的需求和场景来选择合适的方法。如果需要对数据变化进行更精细的控制，或者需要获取数据变化前后的值，那么
watch可能更适合；如果只是需要在数据变化时自动执行一些副作用，那么watchEffect可能更简洁方便。
