vue3的新增的watcheffect api和vue2的watch

Vue 3 中新增了 `watchEffect` API，它与 Vue 2 中的 `watch` 有一些不同之处。

在 Vue 2 中，我们可以使用 `watch` 来监听一个特定的响应式数据，并在其变化时执行相应的操作。这可以是一个函数或一个对象，它接收两个参数：新值和旧值。

而在 Vue 3 中，`watchEffect` API 的使用更加简单和直观。它接收一个函数作为参数，这个函数内部可以访问到所有被使用到的响应式数据。当响应式数据发生变化时，函数内的代码会被自动执行。不需要显式地指定要监听的数据，`watchEffect` 会自动追踪函数内部所使用的所有响应式数据，并建立依赖关系。

相比于 Vue 2 中的 `watch`，`watchEffect` 更加灵活，因为它可以自动追踪依赖，无需手动声明要监听的数据。这使得代码更加简洁和易于维护。

需要注意的是，在使用 `watchEffect` 时，我们需要小心处理副作用。由于 `watchEffect` 内部的代码会在任何响应式数据变化时都执行，因此如果没有适当地处理副作用，可能会导致性能问题或意外的行为。