【Vue3】watch和watchEffect的使用

watch函数

watch函数的定义：
监听data的变化，执行相应操作。
ps：跟vue2的配置

监听 ref定义的数据

基本类型数据作为监听值
对象作为监听值，需要加 .value

    1. 引用:
        import { ref, watch } from “vue”;
    2. 使用:

setup(){
	let numA = ref(0);
	let numB = ref(0);
	let objRef = ref({
		num:0
	})
	watch([numA,numB],(newValue,oldValue)=>{
		console.log('numA/numB发生了变化---',newValue,oldValue)
	})
	watch(objRef.value,(newValue,oldValue)=>{
		console.log('objRef发生了变化---',newValue,oldValue)
	},{
      deep:true, // 深度监听
      immediate:true, // 默认执行
    })
}

监听reactive定义的数据

对象作为监听值
对象属性作为监听值，需要放到回调函数中

    1. 引用:
        import { reactive, watch } from “vue”;
    2. 使用:

setup(){
	let objReactive = reactive({
		a:1,
		b:1,
		c:{
			cc:1
		}
	});

	watch([()=>objReactive.a,()=>objReactive.b],(newValue,oldValue)=>{
		console.log('objReactive发生了变化---',newValue,oldValue)
	})
	watch(objReactive.c,(newValue,oldValue)=>{
		console.log('objReactive.c发生了变化---',newValue,oldValue)
	})
}

ps：监听reactive定义的对象，无法正确输出oldValue，且深度监听是强制开启的，无法关闭

watchEffect函数

watchEffect是vue3新增的一个函数

定义：
watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。

引用：
import { ref, watchEffect } from “vue”;
使用：

setup(){
	let num = ref(0)
	watchEffect(()=>{
		let xd = num.value
		console,log('watchEffect函数执行了~')
	})
}

watchEffect和watch的区别

属性监听
watch：手动添加
watchEffect：自动监听
初始化执行
watchEffect：页面初始时会执行一次

ps：一般场景推荐使用watch监听，逻辑简单、依赖属性少的场景可使用watchEffect函数。

【Vue3】watch和watchEffect的使用

猜你喜欢