Vue3 watch监听多个参数踩坑

在Vue3中,watch可以用数组来监听多个参数,然而需要注意的是,当你需要监听两个参数的时候,name、cont:

const name = ref(0)
const cont = ref(0)

你第一时间想到的是这种写法:

watch([() => name.value, cont.value], ([name, count], [preName, preCount]) => {
	console.log("name或cont改变了");
});

因为ref定义的参数需要用.value拿到定义的值,所以我们下意识这样写,但是这种写法是错误的,正确写法是:

// 错误写法
watch([() => name.value, cont.value], ([name, count], [preName, preCount]) => {
	console.log("name或cont改变了");
});

// 正确写法
watch([() => name.value, cont], ([name, count], [preName, preCount]) => {
	console.log("name或cont改变了");
});

细心的朋友应该发现了,重点在于第二个参数,不需要带.value,本人也是踩坑踩出来的,至于原因作者也不知道,不知道是特性还bug。

你可能感兴趣的:(javascript,vue.js,开发语言)