Vue 3 watchEffect: 多个监听器 | 响应式数据变化监控

在Vue 3中，watchEffect函数是用来监听响应式数据变化的。它会在组件渲染期间自动运行，并且会追踪它依赖的响应式数据。\n\n根据Vue 3的文档，watchEffect函数可以存在多个。你可以在一个组件中多次使用watchEffect函数来监听不同的响应式数据的变化。\n\n例如：\n\njavascript\nimport { watchEffect, reactive } from 'vue';\n\nexport default {\n setup() {\n const state1 = reactive({ count: 0 });\n const state2 = reactive({ message: 'Hello' });\n\n watchEffect(() => {\n console.log('state1.count has changed:', state1.count);\n });\n\n watchEffect(() => {\n console.log('state2.message has changed:', state2.message);\n });\n }\n};\n\n\n在上面的例子中，我们使用了两个watchEffect函数来分别监听state1.count和state2.message的变化。当state1.count或state2.message发生变化时，对应的watchEffect函数会被触发，并输出相应的消息。\n\n需要注意的是，watchEffect函数会在组件渲染期间自动运行，并且会在组件卸载时停止监听。如果你需要在组件卸载前手动停止监听，可以将watchEffect的返回值保存起来，并在组件销毁时调用该函数。\n\n总结来说，Vue 3中的watchEffect函数可以存在多个，并且可以用来监听多个响应式数据的变化。