vue watcheffect,vue中watch的使用
watch和watchEffect都是显示器，只是写法和用法不同。下面这篇文章主要介绍vue3中关于watch和watchEffect的相关信息，通过示例代码介绍的非常详细，有需要的朋友可以参考一下。
目录
首先总结一下两者的区别：下面是基于上面第三点做的一些小实验：总结闲暇时间，对比vue3中的watch和watchEffect，总觉得公文不太清楚，今天稍微练习了一下。
首先总结一下两者的区别：
1.watch是懒执行，watchEffect不是。不管watch的第三个参数的配置如何，第一次执行组件时都不会执行watch，只有在依赖关系改变后才会执行。当程序在这里执行时，watchEffect立即执行，然后响应其依赖关系的变化而执行。
2.这两种方法的用法不同。watch通常传入两个参数。第一个参数是解释什么状态应该触发监听器重新运行，第二个参数定义监听器回调函数。而且这个回调函数还可以接受两个参数，分别指向状态变化前后的值，这样我们就可以看到状态变化前后的变化，但是在watchEffect中看不到，也无法像watch一样在第一个参数中更具体的定义依赖关系。
3.watch只能监控由无功数据和ref定义的值。如果要监控单个值，需要传递对应值的getter函数。但是watchEffect不能监控reactive data和ref定义的值，只能监控它们对应的具体值(见下面的代码)。
下面是根据上面的第三点做的一些小实验：
手表：
1.让watch和watchEffect监听reactive定义的值：
手表：
setup() {
const state=reactive({ count: 0，attr:{ name: } })；
手表(状态，(后，前)={
console . log(post)；
console . log(pre)；
Console.log(已执行观察)；
});
const clickEvent=()={
state.count
};
返回{ click event }；
}
当触发clickEvent事件改变state.count的值时，我们可以从控制台看到下面的结果，显示watch响应了state.count的改变，但在初始时间并没有执行。
手表效果：
setup() {
const state=reactive({ count: 0，attr:{ name: } })；
watchEffect(()={
Console.log(watchEffect已执行)；
console.log(状态)；
});
const clickEvent=()={
state.count
};
返回{ click event }；
}
多次单击该按钮可触发clickEvent事件。控制台结果如下，显示watchEffect在组件第一次执行时执行了一次回调，但之后没有响应state.count的变化。
说明watch可以监听reactive定义的值，watchEffect不行。
2.让watch和watchEffect监听ref定义的值。
手表：
setup(){
const count=ref(0)；
手表(计数，(后，前)={
Console.log(已执行观察)；
console . log(post)；
console . log(pre)；
});
const clickEvent=()={
计数.值；
};
返回{ click event }；
}
结果：
手表效果：
setup(){
const count=ref(0)；
watchEffect(()={
Console.log(watchEffect已执行)；
console.log(计数)；
});
const clickEvent=()={
计数.值；
};
返回{ click event }；
}
结果：
结果同上，说明watch可以响应ref定义的值，watchEffect不行。
2.让watch和watchEffect响应单个值的变化：
手表：
setup(){
const state=reactive({ count:0 })；
watch(state.count，(post，pre)={
Console.log(已执行观察)；
console . log(post)；
console . log(pre)；
});
const clickEvent=()={
state.count
};
返回{ click event }；
}
结果显示，无论如何触发clickEvent事件，watch中的回调函数都不会被触发，控制台也不会打印任何东西。
手表效果：
setup(){
const state=reactive({ count:0 })；
watchEffect(()={
console.log(watchEffect执行了);
控制台。日志(状态。计数)；
});
const clickEvent=()={
状态.计数
};
返回{单击事件}；
}
控制台结果：
说明手表效果能响应单一的值，而看不能，若要让看响应数数的变化，需要给第一个参数传入吸气剂函数，如下：
setup(){
const state=reactive({ count:0 })；
手表（
()=state.count，
（后，前)={
console.log(watch执行了);
控制台。日志(帖子)；
控制台。日志(前)；
}
);
const clickEvent=()={
状态.计数
};
返回{单击事件}；
}
如果吸气剂函数返回的是状态引用值，而在改变状态。计数的时候并不会修改状态的引用值，因此不会响应状态。计数的变化，如果要响应，需要传入第三个参数配置{deep:true}，同时代码中的邮政和在…之前的值是一样的，如下：
setup(){
const state=reactive({ count:0 })；
//不会响应变化
手表（
()=状态，
（后，前)={
console.log(watch执行了);
控制台。日志(帖子)；
控制台。日志(前)；
}
);
const clickEvent=()={
状态.计数
};
返回{单击事件}；
}
setup(){
const state=reactive({ count:0 })；
//加上了{deep:true}可以响应变化
手表（
()=状态，
（后，前)={
console.log(watch执行了);
控制台。日志(帖子)；
控制台。日志(前)；
},
{deep:true}
);
const clickEvent=()={
状态.计数
};
返回{单击事件}；
}
若返回的是引用值，而又需要比较变化前后不同的值，则需要传入吸气剂函数返回该对象的深拷贝后的值，如下例子，返回一个数组：
setup(){
const state=reactive({ count:0 })；
常数=电抗([0，1，2，3])；
手表（
()=[.数字],
（后，前)={
console.log(watch执行了);
控制台。日志(帖子)；
控制台。日志(前)；
}
);
const clickEvent=()={
数字。推(1)；
};
返回{单击事件}；
}
控制台的结果：
总结
到此这篇关于vue3中看和手表效果的文章就介绍到这了，更多相关vue3watch和手表效果内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。