watch 和 watchEffect 是 Vue 3 中两种用于检测数据变化并触发回调函数的 API。
它们的主要区别在于数据依赖收集方式、执行时机和性能影响。
1. 数据依赖收集方式：watch：需要显式指定需要监听的数据源，依赖源更新时执行回调函数。在初始化时，不会立即执行回调函数，只有当数据发生变化时才会触发回调。watchEffect：自动收集依赖源，当依赖源更新时执行回调函数。在声明时会立即执行一次回调函数，之后每次依赖源发生变化时都会触发回调。
2. 执行时机：watch：惰性执行，只有监听的值发生变化时才会执行回调函数。watchEffect：初始化时会立即执行一次回调函数，之后每次依赖源发生变化时都会触发回调。
3. 性能影响：watch：由于是显式指定依赖源，因此只有在需要时才会进行监听，性能影响较小。watchEffect：会自动收集依赖源，可能导致性能开销较大，特别是在大型应用中。总结：watch 和 watchEffect 在功能上相似，但使用场景和性能影响上有所不同。watch 更加灵活且性能影响较小，适用于需要监听的具体数据源；而 watchEffect 适用于自动化收集依赖源的场景，但可能会带来较大的性能开销。在实际开发中，可以根据需求选择合适的 API。
