vue watcheffect,vue3使用watch

　　本文主要详细介绍vue的手表和手表效果。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。

目录

　　 watch结论1:结论2结论3watchEffect结论1结论2 watchEffect监测多个数据源结论3 watchEffect停止监测总结

watch

结论1：

　　Watch需要监听特定的数据源，可以是一个也可以是多个。第一次加载页面时，该函数不会运行，只有在被监控的数据源发生变化时才会运行。

结论2

　　观察监视对象的属性。第一，被监控的值要以函数返回值的形式进行传输和监控，与vue2形式的监控不同。如下，对象的属性在5秒后改变，监控功能打印。

结论3

　　监控多个数据源是把要监控的参数放在watch函数的数组中，但如果是监控多个数据源，如果多个数据源同时发生变化，监控函数只会触发一次，如下图所示。

　　是的，两个数据源同时改变，但是手表功能只触发了一次。

watchEffect

结论1

　　Vue官方文档为了根据响应状态自动应用和重新应用副作用，我们可以使用watchEffect函数。它立即执行一个传入的函数，同时相应地跟踪它的依赖性，并在其依赖性改变时重新运行该函数。

　　可以看出，watchEffect函数不需要传入数据源，只需要一个函数即可。vue将跟踪函数中使用的响应数据的依赖性。当数据发生变化时，watchEffect函数会再次运行，第一次加载页面时会运行watchEffect。

　　验证结论1

结论2 watchEffect 监听多个数据源

　　监控对象，无法完成监控。

　　监控对象属性，可以完成。

结论3 watchEffect 停止监听

　　const stop=watchEffect(()={

　　})

　　停止()

　　watch 和 watchEffect 的区别

　　1 .手表懒。第一次加载页面时不会触发watch功能，只有在被监控数据发生变化时才会触发。

　　2.watch可以数组的形式监控多个参数。如果多个数据同时发生变化，watch只会触发一次。

　　3.3.watch在监控反应式数据时，采用的是()=a的形式，目的是监控数据的getter函数。对于ref定义的数据，可以直接监控。

　　4.watch可以获得监控数据的新旧值。

　　5.watchEffect函数，在页面第一次加载时触发，会一直监控和跟踪内部使用的响应数据。只要被跟踪的响应数据发生变化，watchEffect就会运行

　　6.watchEffect也可以监控多个参数，但是不能监控对象，因为不能监控对象内部的变化。可能watchEffect无法深度监控(具体原因尚不清楚)，只记录普通学习。

总结

　　本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。