Vue3: watch watchEffect

在 Vue 3 中，`watch` 和 `watchEffect` 都是用来监听数据变动并触发回调函数的特性，但它们有一些关键的区别： **1. watch (旧的观察者API)**： - 它是一个基于深度监听的传统 API，当你需要监视整个对象或数组以及它们内部的嵌套变更时非常有用。 - 监听数据变动是异步的，这意味着它不会立即响应数据的变化，而是等到下一次检测周期（通常是下一次渲染周期）才执行回调。 - `watch` 可以接收两个参数：一个是目标属性（需要监听的对象或路径），另一个是回调函数。如果只需要简单的计算或者副作用处理，可以直接写在回调里。 示例： ```javascript watch(obj, function (newVal, oldVal) { // 回调会在新值和旧值改变时执行 }); ``` **2. watchEffect (新的观察者API，Vue 3 引入)**： - `watchEffect` 更加现代化，基于 ES6 的 async/await 并支持副作用管理，提供了一种更清晰的方式来编写副作用逻辑，如订阅事件、网络请求等。 - 它是立即执行的，也就是说它会立即响应数据变化，并且可以在回调中使用 `async` 关键字处理异步操作，这使得代码更容易理解和维护。 - 另外，`watchEffect` 还能控制何时开始和结束观察，这对于资源管理和性能优化很有帮助。 示例： ```javascript watchEffect(() => { async function fetchData() { // 更新数据 } // 数据变化时立即执行fetchData fetchData(); }); ```