上篇文章: 【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
可能更简洁方便。