watch() 和 watchEffect() 都是 Vue 3.x 中提供的 API，主要用于观察 Vue 组件中数据的变化，并在响应式数据变化时执行指定的代码。
但两者之间有以下区别：
- watch()监听指定的数据源，当数据源变化时执行回调函数，它还支持深度监听和立即执行回调函数；而watchEffect()则会自动追踪其内部使用的响应式数据，并在任何被依赖的响应式数据发生变化时重新运行其传入的函数
- watch()可以指定监听多个数据源，也可以用可选参数配置监听的方式（例如深度监听、立即监听）。与此不同的是，watchEffect()接收一个无参数的函数作为参数，它会自动追踪用到的响应式数据，并自动将该函数转换为类似computed函数那样的响应式函数
- watch()的回调函数接收两个参数：新值和旧值。使得开发人员很容易根据数据变化来执行逻辑或异步任务。而watchEffect()运行的函数不会基于新旧值之间的差异进行判断
所以，当需要侦听一个指定的数据源，并在数据源变化时指定回调函数时，就可以使用 watch() 。当需要自动侦听其内部使用的响应式数据，无需指定具体数据源，让 Vue 自动控制更新时就可以选择 watchEffect()。